使用 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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
javascript[js]获取url参数的代码
Oct 17 Javascript
jquery实现excel导出的方法
Apr 04 Javascript
一个简单的jquery进度条示例
Apr 28 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
javascript无刷新评论实现方法
May 13 Javascript
js中作用域的实例解析
Mar 16 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
js实现右键弹出自定义菜单
Sep 08 Javascript
vue中watch的用法汇总
Dec 28 Vue.js
详解Vue3使用axios的配置教程
Apr 29 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一些错误处理的方法与技巧总结
2013/08/10 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
直接在JS里创建JSON数据然后遍历使用
2014/07/25 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
vue中h5端打开app(判断是安卓还是苹果)
2021/02/26 Vue.js
python数据结构之二叉树的建立实例
2014/04/29 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
巴西在线鞋店:Shoestock
2017/10/28 全球购物
项目经理岗位职责
2013/11/11 职场文书
师范学院毕业生求职信范文
2013/12/26 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
MSSQL基本语法操作
2022/04/11 SQL Server
css样式important规则的正确使用方式
2022/06/10 HTML / CSS
Oracle中日期的使用方法实例
2022/07/07 Oracle
Vue Element plus使用方法梳理
2022/12/24 Vue.js