使用 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 相关文章推荐
鼠标事件延时切换插件
Mar 12 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
js判断undefined变量类型使用typeof
Jun 03 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
基于JS实现类似支付宝支付密码输入框
Sep 02 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
jQuery、zepto、js常用小技巧
Feb 12 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
angular多语言配置详解
May 16 Javascript
微信小程序 开发工具快捷键整理
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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
PHP的面向对象编程
2006/10/09 PHP
几个php应用技巧
2008/03/27 PHP
php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
preg_match_all使用心得分享
2014/01/31 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
javascript基本类型详解
2014/11/28 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
Python简易版图书管理系统
2019/08/12 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
世界上最大的二手相机店:KEN
2017/05/17 全球购物
苹果Mac升级:MacSales.com
2017/11/20 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
护士检查书
2014/01/17 职场文书
《秋姑娘的信》教学反思
2014/02/28 职场文书
节能标语大全
2014/06/21 职场文书
2014年学校总务处工作总结
2014/12/08 职场文书
档案工作个人总结
2015/03/03 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL