jquery的ajax文件上传,如何解决illegal invocation的问题?
发布于 作者:苏南大叔 来源:程序如此灵动~ 我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...
使用jquery
的ajax
功能上传数据的时候,就很容易出现Uncaught TypeError: Illegal invocation
的错误提示。那么,如何解决这个很奇怪的错误提示呢?这就是本文要解决的问题。
苏南大叔的程序如此灵动博客,记录苏南大叔和计算机代码的故事。测试环境:谷歌浏览器
,jquery@3.1.0
。Illegal invocation
翻译成中文,就是“非法调用”的意思。
错误提示
测试代码:
<script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<form method="post" action="javascript:test()">
<input type="input" name="who" value="苏南大叔测试jquery提交表单" />
<input type="file" name="file" />
<button>提交数据</button>
</form>
<script type="text/javascript">
function test() {
var data = new FormData(document.forms[0]);
$.ajax({
url: "form.php",
type: "POST",
data: data,
// processData: false, // Uncaught TypeError: Illegal invocation
contentType: false, // multipart/form-data
timeout: 25000,
async: true,
cache: false,
success: function (json) {
console.log(json);
},
error: function (json) {
console.log(json);
}
});
}
</script>
服务器端form.php
可以正常接收普通的表单数据。
错误提示如下图所示:
解决方案 processData
解决方案就是在jquery
的post
里面增加一个参数:processData: false
。processData
的默认值是为true
,但是设置为true
的时候,jquery
会将数据序列化。在上传文件的时候,文件体被序列化这个操作并不是被需要的。所以,修改一下默认配置。如下所示:
processData: false
题外话 contentType
表单POST
提交的时候,是有contentType
可以选择控制的。contentType
的值不同,会导致后台对接的接口,数据流程走向完全不一样。而jquery
提交数据的时候,有个contentType
选项可以修改请求的contentType
,如果不修改类型,使用默认类型的话,就请设置:
contentType: false
但是,最终提交的contentType
是啥,请以f12
里面的请求头里面的数据显示为准。提交formData
的话,默认的contentType
就是multipart/form-data
。
结束语
更多jquery
的经验文章,请点击:
如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。