html 上传图片，拖拽图片，并在页面显示
html 上传图片，拖拽图片，并在页面显示
·
spring boot 项目，实现了点击按钮上传文件，以及拖拽文件上传，限制上传文件的类型，上传文件后再页面展示文件，并且显示文件源大小，源分辨率，文件名称，点击展示的图片，放大显示
默认效果图:
上传文件后：
点击图片放大：
上源码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="shortcut icon" th:href="@{/ico/favicon.ico}" type="image/x-icon" />
<link th:href="@{/css/index.css}" rel="stylesheet" type="text/css">
<script th:src="@{/js/jquery-1.11.1.min.js}"></script>
<script th:src="@{/js/jquery.form.js}"></script>
<body style="background-color: #e6e6e6e6">
<div class="main">
<form id="saveForm" name="saveForm" enctype="multipart/form-data">
<div class="top_cl">
<!-- 拖拽图片到这来 -->
<div class="col-md-5 col-md-offset-1 up-content dragFile">
<p style="margin-top:10px;">拖拽图片到这里哟</p>
<div class="up-area">
<input class = "uploadBtn" type="button" value="点击上传" onclick="uploadFile()">
<input style="display: none" type="file" accept="image/*" name="file" id="file" onchange="xmTanUploadImg(this.files)" multiple>
</div>
</div>
</form>
<div class="fileDivClass" style="display: none" id="imageUl">
<ul class="ulCls">
</ul>
</div>
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
<div id="innerdiv" style="position:absolute;">
<img id="bigimg" style="border:5px solid #fff;" src="" />
</div>
</div>
</body>
<script th:src="@{/image/index.js}"></script>
</html>
js
//拖拽上传文件 在页面进行预览 上传form用到ajax
const dragbox = document.querySelector('.dragFile');
//拖放过程中鼠标经过的元素，被拖放的元素正在本元素范围内移动(一直)
dragbox.addEventListener('dragover', function (e) {
$(".up-area").css({"border":"5px dashed #ccc"});
e.preventDefault(); // 必须阻止默认事件
}, false);
//拖放过程中鼠标经过的元素，被拖放的元素离开本元素范围
dragbox.addEventListener('dragleave', function (e) {
$(".up-area").css({"border":"2px dashed #ccc"});
e.preventDefault(); // 必须阻止默认事件
}, false);
//拖放的目标元素，其他元素被拖放到本元素中
dragbox.addEventListener('drop', function (e) {
e.preventDefault(); // 阻止默认事件
let files = e.dataTransfer.files; //获取文件
// 将拖拽的图片显示在页面
xmTanUploadImg(files)
// code
}, false);
let idNum = 0;
function xmTanUploadImg(files){
if(files.length){
$("#imageUl").show();
for (let i = 0; i < files.length; i++) {
let file = files[i];
//限制 上传类型为图片类型
if(file.type.indexOf("image") != -1){
let fbl = 0;
let html = "";
let name = file.name;//图片名称
if(name.length>16){//名称长度大于16位，重新赋值显示页面
let q_name = name.substring(0,9);
let h_name = name.substring(name.length-3);
name = q_name + "..." + h_name;
}
let url = window.URL || window.webkitURL;
let img = new Image(); //手动创建一个Image对象
img.src = url.createObjectURL(file);//创建Image的对象的url
img.onload = function () { //onload 加载完成后触发
//拼接显示
fbl = this.height+"x"+this.width;
html += '<li>';
html += '<div class="ul_Div_top_Cls"><img class="pic" width="157" height="200" id="showImg'+idNum+'" style="object-fit: cover;"></div>';
html += '<div class="ul_Div_bottom_Cls"><div><span style="font-size: 14px;">'+name+'</span></div>';
html += '<div><span style="float: left">'+renderSize(file.size)+'</span><span style="float: right">'+fbl+'</span></div></div>';
html += '</li>';
$(".ulCls").append(html);
let showImg = $('#showImg'+idNum);
showImg.attr('src', url.createObjectURL(file));
$(".up-area").css({"border":"2px dashed #ccc"});
idNum++;
}
}else{
alert(file.name+"文件类型错误，仅支持图片文件！");
return;
}
}
let form = $("form[name=saveForm]");
let options = {
url:'/image/saveFiles',
type:'post',
success:function(data){
if(data.flag == "1"){
console.log(data)
alert("上传成功");
}else{
alert("上传失败");
}
}
};
form.ajaxSubmit(options);
}
}
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
1
0- 0
已为社区贡献2条内容
所有评论(0)