前端多图上传

/* 多图上传 */
.z_photo {  
    width:94%;
    margin:0 auto;
    overflow: auto;
}
.z_photo img {
    width: 4.8rem;
    height:3.15rem;
}
 
.z_addImg {
	position:relative;
    float: left;
    margin:0 0.45rem 0.5rem 0;
}
.z_addImg:nth-of-type(3n){
	margin-right:0;
}
.z_addImg .imgdel{
    position:absolute;
    top:0.3rem;
    right:0.3rem;
    display:block;
    width:1.0rem;
    height:1.0rem;
    background:url('../images/delete.png') no-repeat;
    background-size:100% 100%;
}
.z_file {
    width: 4.8rem;
    height:3.15rem;
    background: url('../images/z_add.png') no-repeat;
    background-size: 100% 100%;
    float: left;
  }
 
.z_file input::-webkit-file-upload-button {
    width: 4.8rem;
    height:3.15rem;
    border: none;
    position: absolute;
    outline: 0;
    opacity: 0;   
}
 
.z_file input#file {	
    display: block;
    width: 4.8rem;
    height:3.15rem;   
    border: 0;
    vertical-align: middle;
}

 

 function imgChange(obj1, obj2) {
            //获取点击的文本框
            var file = document.getElementById("file");
            //存放图片的父级元素
            var imgContainer = document.getElementsByClassName(obj1)[0];
            //获取的图片文件
            var fileList = file.files;
            //文本框的父级元素
            var input = document.getElementsByClassName(obj2)[0];
            var imgArr = [];
            //遍历获取到得图片文件
            for (var i = 0; i < fileList.length; i++) {
                var imgUrl = window.URL.createObjectURL(file.files[i]);
                imgArr.push(imgUrl);
                var img = document.createElement("img");
                img.setAttribute("src", imgArr[i]);
                 var imgdel = document.createElement("span");
                imgdel.setAttribute("class", "imgdel");
                var imgAdd = document.createElement("div");
                imgAdd.setAttribute("class", "z_addImg");
                imgAdd.appendChild(img);
                imgAdd.appendChild(imgdel);
                imgContainer.prepend(imgAdd);
            };
            imgRemove();
        };
 
        function imgRemove() {
            var imgList = document.getElementsByClassName("z_addImg");
            var imgdel = document.getElementsByClassName("imgdel");           
            for (var j = 0; j < imgList.length; j++) {
                imgList[j].index = j;    
                imgList[j].onclick = function() {
                    var t = this; 
                     $.confirm({
                      title: '确认删除？',                     
                      onOK: function () {
                         t.style.display='none';
                      },
                      onCancel: function () {
                      }
                    });
 
                }
            };
        };