使用 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 相关文章推荐
php,js,css字符串截取的办法集锦
Sep 26 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
js实现异步循环实现代码
Feb 16 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 Javascript
jquery实现轮播图特效
Apr 12 jQuery
bootstrap实现tab选项卡切换
Aug 09 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
PHP与SQL注入攻击[二]
2007/04/17 PHP
php 删除无限级目录与文件代码共享
2008/11/22 PHP
php表单转换textarea换行符的方法
2010/09/10 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
文字幻灯片
2006/06/26 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
Python素数检测的方法
2015/05/11 Python
python数据结构之列表和元组的详解
2017/09/23 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
德国网上宠物店:Zoobio
2018/05/23 全球购物
总经理驾驶员岗位职责
2013/12/04 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
客户答谢会致辞
2015/01/20 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
如何写好活动总结
2019/06/21 职场文书
Vue全局事件总线你了解吗
2022/02/24 Vue.js
MySQL 字符集 character
2022/05/04 MySQL