摘要：通过input = file实现上传多个图片，图片之间的查看展示、以及删除功能。
要想实现多文件上传 只需把 input 标签中 accept="image/*" 此属性删除即可。
input[file]标签的accept属性可用于指定上传文件的 MIME类型 。
上传图片代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上传图片</title>
<link rel="stylesheet" type="text/css" href="../layui/css/layui.css"/>
<style type="text/css">
.uploadBox{
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
/*transform: translateY(-50%);*/
}
.box-img{
width: 200px;
height: 200px;
margin: 0 auto;
}
.content-img{
width: 100%;
padding-right: 360px;
position: absolute;
}
.content-img:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.content-img-list {
white-space: nowrap;
overflow: auto;
text-align: left;
}
.content-img-list-item{
position: relative;
display: inline-block;
margin:15px;
}
.annex{
width: 98px;
height: 147px;
cursor: pointer;
display: inline-block;
background: #CCCCCC;
position: relative;
}
.annex-img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
}
.close-btn{
display: inline-block;
cursor: pointer;
width: 24px;
height: 24px;
top: -10px;
margin-left: -12px;
position: absolute;
background-image: url(../img/close-grey.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.annex-edition{
height: 30px;
line-height: 30px;
color: #9a9a9a;
font-size: 12px;
text-align: center;
background: #f5f5f5;
margin-top: 5px;
}
.annex-edition input{
width:98px;
color: #9a9a9a;
height:100%;
}
</style>
</head>
<body >
<div>
<img alt="" src="" id="showImg" style="max-width:100%;max-height:456px;box-shadow: 0 0 10px #000;">
</div>
<div class="left-upload">
<div class="uploadBox">
<input style="position:absolute;opacity:0;width:100%;height:100%;cursor: pointer;" type="file" id="upload" accept="image/*"/>
<img class="box-img" src="../img/add.png">
</div>
</div>
<div class=" content-img">
<div class="content-img-list">
<!-- 存放预览图片 -->
</div>
</div>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../layui/layui.js"></script>
<script type="text/javascript">
layui.use('layer', function(){
var layer = layui.layer;
var count = 0;
function UploadFunction(name) {
this.init();
};
UploadFunction.prototype = {
// 初始化
init: function() {
this.imgPreview();
this.delImage();
},
flag: 0,
filesList: [],
// 显示上传图片
imgPreview: function() {
var that = this;
$('.left-upload').on('change', '#upload', function(e) {
var files = e.target.files; //得到一串filelist
console.log(files);
if(files.length > 0) {
for(var i = 0; i < files.length; i++) {
var reader = new FileReader();//调用FileReader对象的方法
reader.onload = function() {
var text = '<div class="content-img-list-item" id="uploadImg_'+count+'">'
+'<div class="annex" onclick="\imgBtn(this)\">'
+' <img class="annex-img" src="'+this.result+'">'
+'</div>'
+'<span class="close-btn" id="delImg"></span>'
+'<div class="annex-edition">'
+' <input type="text" class="edition" name="uploadName_'+count+'" placeholder="请输入版本名称" id="edition_'+count+'" />'
+' <input type="hidden" class="edition" name="serverName_'+count+'" id="serverName_'+count+'"/>'
+' <input type="hidden" class="edition" name="suf_'+count+'" id="suf_'+count+'"/>'
+'</div>'
+'</div>';
$('.content-img-list').prepend(text);
$('#showImg').attr("src",this.result);
};
//给FileReader对象一个读取完成的方法,使用readAsDataURL会返回一个url,这个值就保存在事件对象的result里,img通过加载这个地址,完成图片的加载
reader.readAsDataURL(files[i]);
that.filesList.push(files[i]);
};
count++;
};
})
},
/* upLoadMethod: function(file) {
var that = this;
var params = new FormData();
params.append('name', file[0]);
$.ajax({ //使用ajax
type: "post",
url: '上传的地址/upload',
data: params,
dataType: "json",
contentType: false, //FormData对象，已经声明了属性enctype="multipart/form-data"
processData: false, //data值是FormData对象，不需要对数据做处理
success: function(json) {
var error = json.data.error;
if(error!=''&& error != undefined){
alertShow(error);
}else{
......一系列操作
}
},
});
},*/
// 删除图片
delImage: function() {
var that = this;
$('.content-img').on('click', '.close-btn', function() {
var btnLen = $('.close-btn').length;
var deleteList = $(this);
if(btnLen != 1){ //判断图片列表的长度
layer.msg('请确认删除该素材？', {
time: 0 ,//不自动关闭
btn: ['确定', '取消'],
yes: function(index){
layer.close(index);
deleteList.parent().remove();
var lastImg = $("div .annex").find('img').eq(-1).attr('src'); //最后一个元素
$('#showImg').attr("src",lastImg)
}
});
}else{
layer.msg('请确认删除该素材？', {
time: 0 ,
btn: ['确定', '取消'],
yes: function(index){
layer.close(index);
deleteList.parent().remove();
$('#showImg').attr('src','');
}
});
}
});
}
}
var UploadFunction = new UploadFunction();
});
// 点击查看图片
function imgBtn(obj){
var srcImg = $(obj).find("img").attr("src");
$('#showImg').attr("src",srcImg)
}
</script>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
