Ajax提交含有文件type='file'标签的表单

「爱情、让人受尽委屈。」 2022-05-13 01:16 195阅读 0赞

原文地址：[https://blog.csdn.net/u012867699/article/details/78357401][https_blog.csdn.net_u012867699_article_details_78357401]

场景：type="file"，页面选择文件，后台对文件内容解析。

一种方式：将文件上传到服务器，服务器解析文件，后台从服务器获取到文件内容；

另外一种方式：通过表单的方式将type="file"的input对象传给后台解析。

一般如果有封装好的文件服务器，直接用最好。否则用第二种方式。

对于type="file"的input对象，处于安全原因的限制，高版本的浏览器获取不到绝对路径，以免恶意网站用脚本获取访问者本地的文件。

如果是form表单提交，type="file" input提交的是String类型的文件名。

所以采用ajax的方式，使用FormData提交表单，type="file" input对象提交的是CommonsMultipartFile对象。

Html代码：

1.  `<form id="importModel" enctype="multipart/form-data">`
2.  `<input type="file" name="file" id="file">`
3.  `<input type="button" value="确定" onclick="confirm()"/>`
4.  `</form>`

JS代码：

1.  `function confirm() {`
2.  `var formData = new FormData($("#importModel")[0]);`
3.  `$.ajax({`
4.  `type : 'post',`
5.  `url : '/workflow/model/import',`
6.  `dataType : 'json',`
7.  `data : formData,`
8.  `contentType: false,`
9.  `processData: false,`
10. `success : function(data){`
11. `if(data.code == '1001'){`
12. `alert(data.msg);`
13. `$('#importModelTemplate').dialog('close');`
14. `} else {`
15. `alert(data.msg);`
16. `}`
17. `}`
18. `});`
19. `}`

注意：

我们应该使用较新的Jquery，老版本的可能不支持，同时必须设置contentType : false和processData : false。否则，jquery会报“Uncaught TypeError: Illegal invocation”这样的错误。因为jquery会试图将不是字符串的内容进行转换，设置processData : false禁止其转换，设置contentType : false是告诉jquery不要为其设置Content-Type头，防止上传失败

contentType设置为false，因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false

processData设置为false，因为data值是FormData对象，不需要对数据做处理。

通过spring MVC，后台获取数据：

1.  `@RequestMapping(value="/import", method=RequestMethod.POST)`
2.  `@ResponseBody`
3.  `public String importModel(@RequestParam("file") CommonsMultipartFile file){`
4.  `InputStream in = file.getInputStream();`
5.

后台获取的是CommonsMultipartFile对象，然后可以获取文件输入流或文件名，解析文件内容。

参考：http://m.blog.csdn.net/xllily\_11/article/details/52330280

[https_blog.csdn.net_u012867699_article_details_78357401]: https://blog.csdn.net/u012867699/article/details/78357401