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的经验文章，请点击：

• https://newsn.net/tag/jquery/

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