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

1.效果图如下(与后台交互完成图片上传,鼠标悬浮图片上面时可以删除):


image.png

2.前台代码(拿走就能用):




    
    Title
    
    
    
    
 



 

请上传多张照片

注:每张照片大写不可超过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.本地上传成功的图片展示:


image.png

你可能感兴趣的:(ajax+formData完成多图片回显上传)