h5手机端上传多张图片（界面上的展示图片，删除图片）

html:

<!--    照片添加    -->
<div class="z_photo">
    <div class="z_file">
        <input type="hidden" name="ActiveFile" id="ActiveFile">
        <input type="file" name="File" id="file" accept="image/*" multiple onchange="imgChange('z_photo','z_file');" />
    </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>

css:

/* file */
.z_photo {
    width: 100%;
    height: 200px;
    padding: 10px;
    overflow: auto;
    clear: both;
    margin: 10px auto;
    border: 1px solid #ddd;
}

.z_photo img {
    width: 60px;
    height: 60px;
}

.z_addImg {
    float: left;
    margin-right: 0.2rem;
    border: 1px solid #dedede;
}

.z_file {
    width: 60px;
    height: 60px;
    background: url(../images/z_add.png) no-repeat;
    background-size: 100% 100%;
    float: left;
    margin-right: 0.2rem;
}

.z_file input::-webkit-file-upload-button {
    width: 60px;
    height: 60px;
    border: none;
    position: absolute;
    outline: 0;
    opacity: 0;
}

.z_file input#file {
    display: block;
    width: auto;
    border: 0;
    vertical-align: middle;
}
/*遮罩层*/

.z_mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: none;
}

.z_alert {
    width: 300px;
    height: 200px;
    border-radius: 3px;
    background: #fff;
    font-size: 15px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -100px;
}

.z_alert p:nth-child(1) {
    line-height: 150px;
}

.z_alert p:nth-child(2) span {
    display: inline-block;
    width: 49%;
    height: 50px;
    line-height: 50px;
    float: left;
    border-top: 1px solid #ddd;
}

.z_cancel {
    border-right: 1px solid #ddd;
}
.FileShow-wrap li{
    background-color: #dedede;
    margin-bottom: 10px;
    line-height: 40px;
    padding: 0 30px 0 5px;
    position: relative;
}
.FileShow-wrap li i{
    position: absolute;
    color: red;
    right: 5px;
    font-weight: bold;
}

 

js：

var ActiveFileArr = []
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];
    var file = document.getElementById("file");
    var fileList = file.files;
    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() {
                console.log(fileList)
                mask.style.display = "none";
            };
            sure.onclick = function() {
                ActiveFileArr.push($(t).index()-1)
                $("#ActiveFile").val(ActiveFileArr.join())
                mask.style.display = "none";
                t.style.display = "none";
            };

        }
    };
};