JS实现多图上传修改

效果

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 + "&