使用 jQuery.ajax 上传带文件的表单遇到的问题
程序员文章站
2022-03-24 23:05:29
...
今天帮人看代码的时候,遇到一点小问题。使用 jQuery 上传带文件的表单时,会有些问题。
首先,因为使用的是 FormData,所以必须在传入 $.ajax 的参数中配置 processData: false。
否则将会抛出 Illegal invocation 的异常,因为 jQuery 默认是会对传入的 data 字段的数据进行处理的。
官方文档是这么解释的:
其次,注意请求的 Content-Type 首部,默认是 application/x-www-form-urlencoded; charset=UTF-8,也就是我们通常见的 “a=A&b=B” 这种格式。但使用 FormData 时,就不行了。
对参数添加 contentType 字段,将其值设置为 false 即可。如果 jQuery 版本小于 1.6,则手动设置为 multipart/form-data。具体说明请见文档说明:
我以前通常都是使用原生的 XMLHttpRequest,所以倒也没有遇到过这种问题。既然遇到了,就得解决。因此记录下来,以备日后查找。
推荐阅读
-
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
-
layUI框架中文件上传前后端交互及遇到的相关问题
-
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
-
php使用curl模拟浏览器表单上传文件或者图片的方法
-
解决pandas使用read_csv()读取文件遇到的问题
-
使用 HttpClient 进行表单提交时,遇到的问题
-
Vue2.0使用axios引入本地JSON文件时遇到的问题及解决
-
layUI框架中文件上传前后端交互及遇到的相关问题
-
Form表单上传文件(type="file")的使用
-
Vue使用vux-ui自定义表单验证遇到的问题及解决方法