我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

使用jqueryajax功能上传数据的时候,就很容易出现Uncaught TypeError: Illegal invocation的错误提示。那么,如何解决这个很奇怪的错误提示呢?这就是本文要解决的问题。

苏南大叔:jquery的ajax文件上传,如何解决illegal invocation的问题? - jquery-ajax-illegal
jquery的ajax文件上传,如何解决illegal invocation的问题?(图3-1)

苏南大叔的平行空间笔记本博客,记录苏南大叔和计算机代码的故事。测试环境:谷歌浏览器jquery@3.1.0Illegal 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可以正常接收普通的表单数据。

错误提示如下图所示:

苏南大叔:jquery的ajax文件上传,如何解决illegal invocation的问题? - 错误提示信息
jquery的ajax文件上传,如何解决illegal invocation的问题?(图3-2)

解决方案 processData

解决方案就是在jquerypost里面增加一个参数: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的ajax文件上传,如何解决illegal invocation的问题? - content-type
jquery的ajax文件上传,如何解决illegal invocation的问题?(图3-3)

结束语

更多jquery的经验文章,请点击:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   jquery