使用 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 相关文章推荐
用 JavaScript 迁移目录
Dec 18 Javascript
javascript之bind使用介绍
Oct 09 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
树结构之JavaScript
Jan 24 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
解决$store.getters调用不执行的问题
Nov 08 Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 Javascript
详解如何使用Node.js实现热重载页面
May 06 Javascript
vue打包时去掉所有的console.log
Apr 10 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做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python实现数据库跨服务器迁移
2018/04/12 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
钳工实习自我鉴定
2013/09/19 职场文书
水产养殖学应届生求职信
2013/09/29 职场文书
英文简历中的自我评价
2013/10/06 职场文书
党务公开方案
2014/05/06 职场文书
广播体操比赛口号
2014/06/10 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
DE1107机评
2022/04/05 无线电