程序代码:
<div class="container" style="width:100%">
<!--遮罩层-->
<div class="z_mask">
<!--弹出框-->
<div class="z_alert">
<p>确定要删除这张图片吗?</p>
<p>
<span class="z_cancel">取消</span>
<span class="z_sure">确定</span>
</p>
</div>
</div>
<!-- 照片添加 no-repeat -->
<div class="z_photo">
<div class="z_photo1"></div>
<div class="z_file">
<input style="position:absolute;opacity:0;" type="file" name="file" id="file" value="" accept="image/*" multiple onChange="imgChange('z_photo1', 'z_file');" />
<img style="width: 60px;height: 60px;" src="/media/img/a_add.png">
<span style="width:100%;text-align:center">图片上传</span>
</div>
</div>
</div>
<!--遮罩层-->
<div class="z_mask">
<!--弹出框-->
<div class="z_alert">
<p>确定要删除这张图片吗?</p>
<p>
<span class="z_cancel">取消</span>
<span class="z_sure">确定</span>
</p>
</div>
</div>
<!-- 照片添加 no-repeat -->
<div class="z_photo">
<div class="z_photo1"></div>
<div class="z_file">
<input style="position:absolute;opacity:0;" type="file" name="file" id="file" value="" accept="image/*" multiple onChange="imgChange('z_photo1', 'z_file');" />
<img style="width: 60px;height: 60px;" src="/media/img/a_add.png">
<span style="width:100%;text-align:center">图片上传</span>
</div>
</div>
</div>
程序代码:
JS
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 imgAdd = document.createElement("div");
imgAdd.setAttribute("class", "z_addImg");
imgAdd.appendChild(img);
imgContainer.appendChild(imgAdd);
};
imgRemove();///删除
};
function imgRemove() {
var imgList = document.getElementsByClassName("z_addImg");
var mask = document.getElementsByClassName("z_mask")[0];
var cancel = document.getElementsByClassName("z_cancel")[0];
var sure = document.getElementsByClassName("z_sure")[0];
for (var j = 0; j < imgList.length; j++) {
imgList[j].index = j;
imgList[j].onclick = function () {
var t = this;
mask.style.display = "block";
cancel.onclick = function () {
mask.style.display = "none";
};
sure.onclick = function () {
mask.style.display = "none";
t.style.display = "none";
};
}
};
};
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 imgAdd = document.createElement("div");
imgAdd.setAttribute("class", "z_addImg");
imgAdd.appendChild(img);
imgContainer.appendChild(imgAdd);
};
imgRemove();///删除
};
function imgRemove() {
var imgList = document.getElementsByClassName("z_addImg");
var mask = document.getElementsByClassName("z_mask")[0];
var cancel = document.getElementsByClassName("z_cancel")[0];
var sure = document.getElementsByClassName("z_sure")[0];
for (var j = 0; j < imgList.length; j++) {
imgList[j].index = j;
imgList[j].onclick = function () {
var t = this;
mask.style.display = "block";
cancel.onclick = function () {
mask.style.display = "none";
};
sure.onclick = function () {
mask.style.display = "none";
t.style.display = "none";
};
}
};
};