html5选择多张图片,html5手机端多张图片上传删除代码

特效描述：html5手机端 多张图片 上传删除代码。html5多张图片上传，图片上传删除，手机端图片上传代码

代码结构

1. HTML代码

确定要删除这张图片吗？

取消

确定

//px转换为rem

(function(doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function() {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

if (clientWidth >= 640) {

docEl.style.fontSize = '100px';

} else {

docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';

}

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

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";

};

}

};

};