FormData--JQuery使用FormData利用Ajax实现多图片、文件上传

传统的form表单提交会导致页面刷新，但是在有些情况下，我们不希望页面被刷新，这种时候我们都是使用Ajax的方式进行请求的。
我自己了解的实现文件上传的比较好用的，有普通的Ajax提交文件方式、FilesUpload等，但是用了FormData后，觉得fromdata使用起来更加简单便捷，所以在此给各位小伙伴们分享一下，不足之处还请各位伙伴提示，在此感谢！
例如表单：
表单内必须设enctype=”multipart/form-data”属性。

<form id="add_news" method="post" enctype="multipart/form-data" > 
<input type="file" id="photo">
<input type="file" id="photo2">
<input type="file" id="photo3">
<input type="text" id="photo4">
<input type="text" id="photo5">
</form>
   
   
1
2
3
4
5
6
7

第一种提交方式：

//直接把整个Form表单内容塞到FormData对象里面；
var formElement = $("#add_news");
var formData = new FormData(formElement);
$.ajax({  
        url: '../image/customser.do',  
        type: 'POST',  
        data: formData,  
        dataType: 'JSON',  
        cache: false,  
        processData: false,  
        contentType: false,
        success : function(data) {
            alert("上传成功");
        },
        error:function(){
            alert("上传失败");
        }
    });
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

第二种方式：

var formData = new FormData();
//获取普通input文本内容
formData.append("servicerid", $("#photo4").val());
formData.append("servicerid", $("#photo5").val());
//获取图片等文件
formData.append("file", $("#photo1")[0].files[0]);
formData.append("file", $("#photo2")[0].files[0]);
formData.append("file", $("#photo3")[0].files[0]);
$.ajax({  
        url: '../image/customser.do',  
        type: 'POST',  
        data: formData,  
        dataType: 'JSON',  
        cache: false,  
        processData: false,  
        contentType: false,
        success : function(data) {
            alert("上传成功");
        },
        error:function(){
            alert("上传失败");
        }
    });
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

后台获取：

@RequestMapping(value = "/image/customser.do")
@ResponseBody
public ResultObject uploadAuthImages(@RequestParam(value = "file", required = false) MultipartFile[] files, 
            HttpServletRequest request) {
        Map<String, Object> map = new HashMap<String, Object>();
        //保存文件  
        for(int i=0; i<files.length; i++){
            String filePath = request.getSession().getServletContext().getRealPath("/")  + "upload/";
            UUID uuid = UUID.randomUUID();
            String fileName = new Date().getTime() + uuid.toString() + ".jpg";
            System.out.println("图片地址："+filePath);
            File targetFile = new File(filePath, fileName);
            if (!targetFile.exists()) {
                targetFile.mkdirs();
            }
            // 保存
            try {
                files[i].transferTo(targetFile);
            } catch (Exception e) {
                e.printStackTrace();
            }
            //添加图片路径到map集合
            map.put("img"+i, "/upload/" + fileName);
        }
        map.put("photo4", request.getParameter("photo4"));
        map.put("photo5", request.getParameter("photo5"));
        return this.oneService.uploadAuthImages(map);

    }
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

这里要注意几点：
1、processData设置为false。因为data值是FormData对象，不需要对数据做处理。
2、标签添加enctype=”multipart/form-data”属性。
3、cache设置为false，上传文件不需要缓存。
4、contentType设置为false。因为是由表单构造的FormData对象，且已经声明了属性enctype=”multipart/form-data”，所以这里设置为false。
5、上传后，服务器端代码需要使用从查询参数名为file获取文件输入流对象，因为中声明的是name=”file”。
6、后台：MultipartFile[] files 代表数组类型，获取多文件上传；如果是单文件上传的话，MultipartFile file 就可以了。

        <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/markdown_views-ea0013b516.css">
            </div>