jsp上传多张照片及删除功能

第一步导入相关依赖

fastjson、jackson-databind、commons-fileupload、commons-io等maven依赖包

第二步

在spring文件配置

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!-- 设定默认编码 -->
    <property name="defaultEncoding" value="UTF-8"></property>
    <!-- 设定文件上传的最大值为5MB，5*1024*1024 -->
    <property name="maxUploadSize" value="5242880"></property>
    <!-- 设定文件上传时写入内存的最大值，如果小于这个参数不会生成临时文件，默认为10240 -->
    <property name="maxInMemorySize" value="40960"></property>
    <!-- 延迟文件解析 -->
    <property name="resolveLazily" value="true"/>
</bean>

第四步前端编写

用到的js依赖

<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/utils.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

js部分

<script>
    $(".ticketUploader").on("change", function (e) {
        var files = e.target.files;
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            Utils.ImgToBase64(file,1980,function(resizeImgBase64) {
                $('#ticketImages' ).append('<li id="a" img="' + resizeImgBase64 + '" class="weui-uploader__file" style="background-image:url(' + resizeImgBase64 + ')" bUploaded="0"><close οnclick="closePic(this)" class="el-icon-error"></close></li>');
            });
        }
      $(".ticketUploader").val('')
    });
    function closePic(obj){
      console.log(obj)
      //此时的obj就是close标签，下面是获得这个标签的父标签
      let pic = obj.parentNode
      pic.remove()
    }
</script>

body部分

<ul class="weui-uploader__files" id="ticketImages">
</ul>
<div class="weui-uploader__input-box" >
    <input class="weui-uploader__input ticketUploader" type="file" accept="image/*;" multiple="" attachtype="1" />
</div>

效果图：

上传后

 点击叉图标即可删除，可上传多张！