Ajax提交含有文件type='file'标签的表单
来源:互联网 发布:origin淘宝买游戏 编辑:程序博客网 时间:2024/06/05 09:53
场景:type="file",页面选择文件,后台对文件内容解析。
一种方式:将文件上传到服务器,服务器解析文件,后台从服务器获取到文件内容;
另外一种方式:通过表单的方式将type="file"的input对象传给后台解析。
一般如果有封装好的文件服务器,直接用最好。否则用第二种方式。
对于type="file"的input对象,处于安全原因的限制,高版本的浏览器获取不到绝对路径,以免恶意网站用脚本获取访问者本地的文件。
如果是form表单提交,type="file" input提交的是String类型的文件名。
所以采用ajax的方式,使用FormData提交表单,type="file" input对象提交的是CommonsMultipartFile对象。
Html代码:
<form id="importModel" enctype="multipart/form-data"> <input type="file" name="file" id="file"> <input type="button" value="确定" onclick="confirm()"/> </form>
JS代码:
function confirm() {var formData = new FormData($("#importModel")[0]); $.ajax({ type : 'post', url : '/workflow/model/import', dataType : 'json', data : formData, contentType: false, processData: false, success : function(data){ if(data.code == '1001'){ alert(data.msg); $('#importModelTemplate').dialog('close'); } else { alert(data.msg); } } });}
注意:
我们应该使用较新的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,后台获取数据:
@RequestMapping(value="/import", method=RequestMethod.POST) @ResponseBody public String importModel(@RequestParam("file") CommonsMultipartFile file){ InputStream in = file.getInputStream();
后台获取的是CommonsMultipartFile对象,然后可以获取文件输入流或文件名,解析文件内容。
参考:http://m.blog.csdn.net/xllily_11/article/details/52330280
- Ajax提交含有文件type='file'标签的表单
- ajax异步提交含有文件的表单
- 通过Ajax方式提交含有文件的表单
- type= image 标签提交表单
- 用jquery.form.js 实现ajax提交含有上传文件和普通字段的表单
- html5里使用ajax提交含有上传文件的form表单
- ajax提交包含file的表单
- ajax方式提交file表单
- ajax方式提交file表单
- 提交含有文件的表单集合的时候使用
- Html+CSS input type=file 文件标签的美化
- 提交含有CKEditor的表单
- 【HTML】统一file提交样式 input type=file浏览修改,不清空file值,提交表单
- ajax form表单提交 input file中的文件
- 含有文件的form表单用jquery提交
- 提交含有文件的From,后台获取不到File
- ajax提交带文件的表单
- 使用ajax提交包含文件的表单
- MySQL基于时间字段进行分区的方案总结
- PHP函数处理 函数(1): call_user_func(_array)、func_get_arg(s)、func_num_args
- awk 根据条件输出指定的行
- 22-对象的销毁-析构函数
- NOIP模拟(10.26)T1 抄代码
- Ajax提交含有文件type='file'标签的表单
- NOIP模拟 做运动【并查集+最短路】
- scp与cp复制目录问题
- 4.9 chmod和fchmod函数
- 字符串中的空格处理
- Django 中针对基于类的视图添加 csrf_exempt
- 最强 Android Studio 使用小技巧和快捷键
- python3.6 源码分析(二):另一个例子
- CUDA4.0 inline PTX汇编程序开发