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> 

传统的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> 

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