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

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

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(
                '
' +
                '
 
' +
                '' +
                ''+
                '
'
            );
        }
    });
 

$(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页面

 

                
            单据上传（可上传多张）
            

                    预览图：
                

                        
                          

                          

                          
                              
                              
                          
                         
                        
                
            
        

3，接口（直接放contrller里）

	@RequestMapping("uploadImg3")
	@ResponseBody
	public Map uploadImg3(@RequestParam("file") MultipartFile files[],HttpSession session){
			Map 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是后台数据库的表的字段，以逗号隔开存储多张图片的链接