复制即可用，样式可以自我修整一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多张文件和图片上传 带删除，查看，放大图片的功能</title>
</head>
<body class="bg-ff">
<div class="p20">
请选取一个图像文件: <input type="file" id="file" name="file" multiple="multiple" onchange="upLoadImg(this,'aa')" />
<button class="b-e5 p4-15 bg-diy cf" style="border: none;" onclick="uploadFj()">确认上传</button>
<div class="showImgBox flex-fsfs mt20"></div>
<div class="showFileBox flex-dc mt20"></div>
</div>
</body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.js"></script>
<script>
//多张图片和文件上传，配合表单使用，能删除，放大，和查看
var imgFileData = [];
function uploadFj() {
var formData = new FormData();
imgFileData.forEach((item, index) => {
formData.append("files", item, item.name);
})
$.ajax({
type: "post",
url: "commonUploadController.do?uploadFiles",
processData: false,
contentType: false,
data: formData,
dataType: "json",
cache: false,
success: function(res) {
console.log(res);
layer.alert(res.message);
layer.close(l);
},
error: function(res) {
console.log(res, "获取接口失败");
layer.close(l);
}
});
}
function upLoadImg(file, picbox, size) {
var size = size ? size : 1;
if ($('.shade').length == 0) {
$('body').append($('<div class="shade" onclick="javascript:closeShade()" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: rgba(0, 0, 0, 0.2);z-index: 1000;display: none;"><div class="" style="width: 300px;height: 200px;line-height: 200px;position: absolute;top: 50%;left: 50%;margin-top: -100px;margin-left: -150px;background: white;border-radius: 5px;text-align: center;"><span class="text_span"></span></div></div>'));
}
if ($('.shadeImg').length == 0) {
$('body').append($('<div class="shadeImg" onclick="javascript:closeShadeImg()" style="position: absolute;display: none;width: 100%;height: 100%;top: 0;left: 0;z-index: 15;text-align: center;background: rgba(0, 0, 0, 0.2);"><div><img class="showImg" src="" style="width: 100%;margin-top: 140px;"></div></div>'));
}
var objUrl;
var img_html = "";
var file_html = "";
var template = $(file).parent().html();
var picbox = document.getElementById(picbox);
var filepath = $(file).val();
if ($(picbox).children('label').length > size) {
$(".shade").fadeIn(500);
$(".text_span").text("最多可以上传" + size + '张图片');
return false;
};
removeImg = function(r) {
rName = $(r).parents('.isImg').data('name');
console.log(rName, "rName");
imgFileData = imgFileData.filter((item) => {
return item.name != rName
});
console.log(imgFileData, "imgFileData");
$(r).parents('.isImg').remove();
event.stopPropagation();
event.preventDefault();
return false;
}
lookBigImg = function(b) {
$(".shadeImg").fadeIn(500);
$(".showImg").attr("src", $(b).attr("src"));
event.stopPropagation();
event.preventDefault();
return false;
}
closeShade = function() {
$(".shade").fadeOut(500);
}
closeShadeImg = function() {
$(".shadeImg").fadeOut(500);
};
getObjectURL = function(file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file);
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file);
}
return url;
}
for (var i = 0; i < file.files.length; i++) {
objUrl = getObjectURL(file.files[i]);
console.log(objUrl)
if (file.files[i].type.indexOf('image') != -1) {
img_html += "<div class='isImg' style='position: relative;' data-name='" + file.files[i].name + "' style='width: calc(100%/4);'><img src='" + objUrl + "' onclick='javascript:lookBigImg(this)' style='height: 100%; width: 100%;' /><button class='removeBtn flex-center' onclick='javascript:removeImg(this)' style='position:absolute;right: 0;top: 0;background: #d51719;border-radius: 50%;color:#fff;line-height: 30px;width: 30px;height: 30px;font-size: 10px;display: flex;align-items: center;justify-content: center;'>x</button></div>";
} else {
file_html += '<div class="flex-cfs isImg" style="position: relative;" data-name="' + file.files[i].name + '"><a class="flex-fsfs mtb10" target="_blank" href="' + objUrl + '">' + file.files[i].name + '</a><span class="plr20 f14 c-p" onclick="removeImg(this)" style="margin-left:30px;">x</span></div>'
}
imgFileData.push(file.files[i]);
console.log(imgFileData, "imgFileData");
}
$('.showImgBox').html(img_html);
$('.showFileBox').html(file_html);
return true;
}
</script>
