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

原文地址: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

猜你喜欢

转载自blog.csdn.net/tanga842428/article/details/82558079