多图上传（单击预览、删除功能）

网上很多可以参考的资料，但基本是不全的。以下为自己总结：

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是后台数据库的表的字段，以逗号隔开存储多张图片的链接