多个图片累加上传

    <!--图片上传-->
	<div class="z_photo">
        <div class="z_file">
        <input type="file" name="file" id="file" value="" accept="image/*" multiple onchange="imgChange('z_photo','z_file');" />
       </div>
    </div>
/* 多图上传 */
.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 () {
                      }
                    });

                }
            };
        };

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值