使用 jQuery.ajax 上传带文件的表单遇到的问题


Posted in Javascript onOctober 31, 2016

今天帮人看代码的时候,遇到一点小问题。使用 jQuery 上传带文件的表单时,会有些问题。

首先,因为使用的是 FormData,所以必须在传入 $.ajax 的参数中配置 processData: false。

否则将会抛出 Illegal invocation 的异常,因为 jQuery 默认是会对传入的 data 字段的数据进行处理的。

官方文档是这么解释的:

使用 jQuery.ajax 上传带文件的表单遇到的问题

其次,注意请求的 Content-Type 首部,默认是 application/x-www-form-urlencoded; charset=UTF-8,也就是我们通常见的 “a=A&b=B” 这种格式。但使用 FormData 时,就不行了。

对参数添加 contentType 字段,将其值设置为 false 即可。如果 jQuery 版本小于 1.6,则手动设置为 multipart/form-data。具体说明请见文档说明:

使用 jQuery.ajax 上传带文件的表单遇到的问题

我以前通常都是使用原生的 XMLHttpRequest,所以倒也没有遇到过这种问题。既然遇到了,就得解决。因此记录下来,以备日后查找。

以上所述是小编给大家介绍的使用 jQuery.ajax 上传带文件的表单遇到的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
与jquery serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
jquery $("#variable") 循环改变variable的值示例
Feb 23 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
JavaScript里 ==与===区别详解
Aug 16 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
vue-i18n结合Element-ui的配置方法
May 20 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
vue路由实现登录拦截
Mar 24 Vue.js
微信小程序 开发工具快捷键整理
Oct 31 #Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 #Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 #Javascript
jQuery绑定事件的四种方式介绍
Oct 31 #Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 #Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 #Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 #Javascript
You might like
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
windows下python之mysqldb模块安装方法
2017/09/07 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
美国在线咖啡、茶和餐厅供应商:LollicupStore
2018/05/04 全球购物
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
实习会计求职自荐信范文
2014/03/10 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
毕业生就业推荐表自我评价
2015/03/02 职场文书
盗窃案辩护词
2015/05/21 职场文书
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python
Go 语言中 20 个占位符的整理
2021/10/16 Golang