效果
html
<style type="text/css">
.imageDiv {
display:inline-block;
width:160px;
height:130px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border:1px dashed darkgray;
background:#f8f8f8;
position:relative;
overflow:hidden;
margin:10px
}
.cover {
position:absolute;
z-index:1;
top:0;
left:0;
width:160px;
height:130px;
background-color:rgba(0,0,0,.3);
display:none;
line-height:125px;
text-align:center;
cursor:pointer;
}
.cover .delbtn {
color:red;
font-size:20px;
}
.imageDiv:hover .cover {
display:block;
}
.addImages {
display:inline-block;
width:160px;
height:130px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border:1px dashed darkgray;
background:#f8f8f8;
position:relative;
overflow:hidden;
margin:10px;
}
.text-detail {
margin-top:40px;
text-align:center;
}
.text-detail span {
font-size:40px;
}
.file {
position:absolute;
top:0;
left:0;
width:160px;
height:130px;
opacity:0;
}
</style>
<form class="form-horizontal m-t" id="signupForm" enctype="multipart/form-data">
<div id="Pic_pass">
<p style="font-size: 20px;font-weight: bold;">请上传多张照片 </p>
<p><span style="color: red">注:每张照片大小不可超过4M,且最多可以传五张</span></p>
<div class="picDiv">
<div class="addImages">
<input type="file" class="file" id="uploadFilexxx" multiple="multiple" accept="image/png, image/jpeg, image/gif, image/jpg">
<div class="text-detail">
<span>+</span>
<p>点击上传</p>
</div>
</div>
</div>
</div>
<div class="msg" style="display: none;"></div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-3">
<button class="btn btn-primary pull-right" type="button" onclick="save()">确认发布</button>
</div>
</div>
</form>
上传js
//图片上传预览功能
var userAgent = navigator.userAgent; //用于判断浏览器类型
//使用formData完成多图片上传
var formData = new FormData();
// 统计上传图片数量
var imgCount = 0;
// 上传图片数组
var uploadImgArr = new Array();
$(".file").change(function() {
//获取选择图片的对象
var docObj = $(this)[0];
var picDiv = $(this).parents(".picDiv");
//得到所有的图片文件
var fileList = docObj.files;
//将图片数据放到formData中传递后台
if($(this)[0].files.length==1){
//动态添加html元素
var picHtml = "<div class='imageDiv' > <img id='img" + fileList[0].name + "&