java 前端jsp页面 通过ajax 上传多张图片 可从后台获取图片 并删除修改

<%@ page contentType=“text/html;charset=UTF-8” language=“java” %>
<%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core” %>
<%@ taglib prefix=“fmt” uri=“http://java.sun.com/jsp/jstl/fmt” %>

   <style>
        * {
            margin: 0;
            padding: 0;
        }

        /*图片上传*/

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .container {
            width: 100%;
            height: 100%;
            overflow: auto;
            clear: both;
        }

        .z_photo img {
            width: 1rem;
            height: 1rem;
        }

        .z_addImg {
            float: left;
            margin-right: 0.2rem;
        }

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

        .z_file input::-webkit-file-upload-button {
            width: 1rem;
            height: 1rem;
            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: 3rem;
            height: 2rem;
            border-radius: .2rem;
            background: #fff;
            font-size: .24rem;
            text-align: center;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -1.5rem;
            margin-top: -2rem;
        }

        .z_alert p:nth-child(1) {
            line-height: 1.5rem;
        }

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

        .z_cancel {
            border-right: 1px solid #ddd;
        }

        .z_cancel {
            border-right: 1px solid #ddd;
        }

    </style>

•         </li>
          <li>
              <div class="detail_div">
                  <label>上传描述图片</label>
                  <!--    照片添加    -->
                  <div class="z_photo">
                      <div class="z_file">
                          <input type="file" name="file" id="fileNew" value="" accept="image/*" multiple
                                 onchange="imgChange('z_photo','z_file');"/>
                      </div>
                      <c:forEach items="${list}" var="o" varStatus="m">
                          <div id="${m.index}" class="z_addImg">
                              <div class="z_sure" onclick="imgRemove('${m.index}','${o.imgUrl}')"
                                   style=" float: right;  color: red;cursor: pointer "><i class="iconfont">x</i></div>
                              <img
                                      src="${o.imgUrl}"></div>
                      </c:forEach>
                  </div>
                
          </li>
          <li style="border-bottom: 0px">
              <div class="detail_div">
                  <label>上传商品头图</label>
                  <button onclick="clickFile()" type="button" style="border: none;background-color: #589cf6;  color: #FFFFFF;  padding: 10px 15px;  font-size: 15px;  border-radius: 5px; cursor: pointer;" class=" borderRadius3">上传图片</button>
                  <input type="file" style="display:none" name="file" id="file"
                         onchange="fileImport();">
              </div>
          </li>
          <li>
              <div class="detail_div">
                  <img id="img" style="height: 50%;width: 50%" src="=">
              </div>
          </li>
  
      </ul>
      <input type="hidden" value="${shopping.id}" name="" id="shopId">
      <input type="hidden" value="${shopping.imgurl}" name="" id="filePath">
      <input type="hidden" value="${filesUrl}" name="" id="describePath">
      <input type="hidden" value="${filesSize}" name="" id="listSize">
      <div class="edit_div">
          <button type="button" class="edit_btn borderRadius3 ruizi" style="margin-top: 25%;" onclick="sumbit ()">保存
          </button>
      </div>
  </div>
  

js

<script type="text/javascript">
    function sumbit() {
        var shopId = document.getElementById("shopId").value;
        var commodity = document.getElementById("commodity").value;
        var price = document.getElementById("price").value;
//        var shopDescribe = document.getElementById("shopDescribe").value;
        var filePath = document.getElementById("filePath").value
        var describePath = document.getElementById("describePath").value
       
    
        $.ajax({
            url: '${pageContext.request.contextPath}/manage/updateShopping.json',
            data: {
                "id": shopId,
                "commodity": commodity,
                "price": price,
                // "shopDescribe": shopDescribe,
                "filePath": filePath,
                "describePath": describePath,
            },
            dataType: "json",
            success: function (data) {
                if (data.msg == '0') {
                    window.location.href = "${pageContext.request.contextPath}/manage/shoppingList.json"
                } else {
                    alert(data.msg);
                }
            },
            error: function () {
                alert("提交失败！")
            }
        });
    }
    function clickFile() {
        document.getElementById("file").click();
    }

    function fileImport() {
        //获取读取我文件的File对象
        var file = document.getElementById('file').files[0];
        if (file == undefined) {
            return;
        }
        var name = file.name; //读取选中文件的文件名
        var filechk = file.name.substring(file.name.lastIndexOf('.') + 1);
        if ((filechk == 'jpg') || (filechk == 'jpeg') || (filechk == 'png')) {
            $.ajaxFileUpload({
                url: '${pageContext.request.contextPath}/manage/uploadImg.json',
                secureuri: false, //是否需要安全协议，一般设置为false
                fileElementId: 'file', //文件上传域的ID
                dataType: 'json', //返回值类型 一般设置为json
                success: function (data) {
                    if (data.msg != '0') {
                        document.getElementById("filePath").value = data.msg;
                        document.getElementById("img").src = data.msg;
                        document.getElementById("img").style.width = "50%";
                        document.getElementById("img").style.height = "50%";
                        document.getElementById("file").value = "";
                    } else {
                        alert("上传失败");
                    }
                },
                error: function () {
                    cancel_shield()
                    alert("提交失败，请认真核对格式是否正确！")
                }
            })
            return false;
        } else {
            alert('请选择图片文件');
        }
    }

    (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 listIndex = document.getElementById("listSize").value;
        alert(listIndex)
        var formData = new FormData();
        var file = document.getElementById("fileNew");
        //存放图片的父级元素
        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);
            var body = document.getElementsByClassName('z_addImg')[listIndex]
            body.id = ''+listIndex
            document.getElementById("listSize").value = Number(listIndex) +1;
            formData.append("file", fileList[i]);
            $.ajax({
                type: "post",
                url: "${pageContext.request.contextPath}/manage/uploadFilesImg.json",
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    var f = document.getElementById("describePath").value
                    document.getElementById("describePath").value = f + "@" + data.msg;
                    var modelStr = "<div class='z_sure'  οnclick='imgRemoveAdd("+listIndex+")'style=' float: right;  color: red;cursor: pointer '><i class='iconfont'>x</i></div>";
                    modelStr =modelStr +"<input id='asd"+listIndex+"' type='hidden' value='"+ data.msg+"'   ></input>";
                    $("div[class=z_addImg]:last").append(modelStr);
                },
                error: function (e) {
                }
            });
        };
    };

    function imgRemove(id, url) {
        var listIndex1 = document.getElementById("listSize").value ;
        document.getElementById("listSize").value = Number(listIndex1) -1;
        document.getElementById(id).remove();
        var path = document.getElementById("describePath").value
        var newstr = path.replace("@" + url, "");
        document.getElementById("describePath").value = newstr;
    };
    function imgRemoveAdd(id) {
        var listIndex1 = document.getElementById("listSize").value ;
        var urlUp = document.getElementById("asd"+id).value;
        var path = document.getElementById("describePath").value
        var newstr = path.replace("@" + urlUp, "");
        document.getElementById("describePath").value = newstr;
        document.getElementById(id).remove();
        document.getElementById("listSize").value = Number(listIndex1) -1;
    };

</script>