多圖上傳（單擊預覽、刪除功能）

網上很多可以參考的資料，但基本是不全的。以下爲自己總結：

1，js部分：

    upload.render({
        elem: '#test2'
        , url: '${pageContext.request.contextPath }/user/uploadImg3'
        , multiple: true
        , before: function (obj) {
           layer.msg('圖片上傳中...', {
                icon: 16,
                shade: 0.01,
                time: 0
            })  
        }
        , done: function (res) {
             layer.close(layer.msg());//關閉上傳提示窗口
            $('#uploader-list').append(
                '<div id="" class="file-iteme">' +
                '<div class="handle"> <i class="layui-icon" style="color: white ;margin-right: 40%">&#xe640;</i></div>' +
                '<img class="preview" style="color: white;width: 100px;height: 100px"  src="${pageContext.request.contextPath }/' + res.url + ' ">' +
                '<input type="hidden" name="imgs" value="'+res.url+'" />'+
                '</div>'
            );
        }
    });
 

$(document).on("mouseenter mouseleave", ".file-iteme", function (event) {
    if (event.type === "mouseenter") {
        //鼠標懸浮
        $(this).children(".handle").fadeIn("fast");
    } else if (event.type === "mouseleave") {
        //鼠標離開
        $(this).children(".handle").hide();
    }
});
//單張圖片刪除 
$(document).on("click", ".file-iteme .handle", function(event){
    $(this).parent().remove();
})
//圖片預覽
	$(document).on("click", ".file-iteme .preview", function(event){
		var url= $(this).attr('src');
		var index = layer.open({
  	type: 2,
  	content: url,
  	area: ['100%', '100%'],
 	 title: "預覽",
 	 maxmin: true,
  	closeBtn: 1
	});
 	layer.full(index); 
	  })

2，jsp或者html頁面

 <div class="layui-upload">
                
            <button type="button" class="layui-btn layui-btn-warm" id="test2">單據上傳（可上傳多張）</button>
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%">
                    預覽圖：
                <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list">
                        <c:forEach var="sn" items="${splitImg }">
                          <div id="" class="file-iteme" >
                          <div class="handle"><i class="layui-icon" style="color: white;margin-right: 40%">&#xe640;</i>
                          </div>
                              <img src="${pageContext.request.contextPath }/${sn }"  alt="圖片丟失" width="100" height="100" class="preview">
                              <input type="hidden" name="imgs" value="${sn }" />
                          </div>
                         </c:forEach>
                        
                </div>
            </blockquote>
        </div>

3，接口（直接放contrller裏）

	@RequestMapping("uploadImg3")
	@ResponseBody
	public Map<String,Object> uploadImg3(@RequestParam("file") MultipartFile files[],HttpSession session){
			Map<String,Object> map = new HashMap<>();
			String code="0";
			String url="";
			for (MultipartFile file : files) {
				//得到上傳的路徑
				String path = session.getServletContext().getRealPath("/upload");
				//得到文件的老名字
				String oldName = file.getOriginalFilename();
				//根據老名字生成新名字
				String newName = StrUtils.createStrUseUUID(oldName);
				//組裝File
				File file1 = new File(path, newName);
				//上傳
				try {
					file.transferTo(file1);
					code="1";
					url="upload/"+newName;
				} catch (Exception e) {
					e.printStackTrace();
				}
				map.put("code", code);
				map.put("url", url);
			}
			return map;
		}

4補充：

1，在相應的jsp後者html頁面中添加C標籤<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

2，imgs是後臺數據庫的表的字段，以逗號隔開存儲多張圖片的鏈接