程序代码：

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

程序代码：

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