ajax+formData完成多图片回显上传

1.效果图如下（与后台交互完成图片上传，鼠标悬浮图片上面时可以删除）：

2.前台代码（拿走就能用）：

    
    
    
    
    
    






    
请上传多张照片 
    
注：每张照片大写不可超过4M，且最多可以传十张
    

        


            
            

                +
                
点击上传
            
        
        上传
    

 3.后台controller代码（图片上传到了本地，如果需要将图片路径保存到数据库的请看另一篇文章）

 @ResponseBody
    @RequestMapping("/MultiPictareaddData")
    public Map MultiPictareaddData( MultipartFile[] file,HttpServletRequest request) throws IOException {
    List list = new ArrayList();
    Map map=new HashMap();
    if (file != null && file.length > 0) {
        System.out.println(file.length+"王阳明");
        for (int i = 0; i < file.length; i++) {
            MultipartFile filex = file[i];
            // 保存文件
            saveFile(request, filex);
        }
        map.put("success","ok");
        map.put("msg","上传成功");
    }else{
        System.out.println(file.length+"：长度就是零");
        map.put("msg","上传失败");
    }
        return map;
}
    private void saveFile(HttpServletRequest request,MultipartFile file) throws IOException {
        String originalFilename = file.getOriginalFilename();
        String name = file.getName();
        String randomUUID = UUID.randomUUID().toString();
        int index = originalFilename.lastIndexOf(".");
        String exet = originalFilename.substring(index);
        Date date = new Date();
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd\\HH\\mm\\ss");
        String dateStr = sdf.format(date); // D:\\uploads\\20180824 String
        String filePath = "D:\\uploads\\" + dateStr;
        System.out.println("filePath=" + filePath);
        File file2 = new File(filePath);
        if (!file2.exists()) {
            file2.mkdirs();
        }
        filePath += "\\" + randomUUID + exet;
        System.out.println(filePath+"P");
        file.transferTo(new File(filePath));// ctrl+1

    }

4.本地上传成功的图片展示：