<!--图片上传-->
<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 () {
}
});
}
};
};
