ajax上传图片报Uncaught TypeError: Illegal invocation 怎么解决？

错误重现

下面的代码是用ajax提交formData对象的方式来上传图片的例子，但是提交的时候，会报：Uncaught TypeError: Illegal invocation

<form id="upload-form">
    <div class="field">
        <input type="file" name="photo" accept="image/*">
    </div>
    <div class="field">
        <input type="text" name="words">
    </div>
    <div class="submit-btn">
        <input type="button" value="submit">
    </div>
</form>

<script>
    $(document).ready(function(){
        $('input[type="button"]').on('click', function(){
            var formData = new FormData();
            formData.append('photo', $('input[name="photo"]').get(0).files[0]);
            formData.append('words', $('input[name="words"]').val());
            $.ajax({
                type:'post',
                url:'./upload.php',
                data: formData,
                success:function(response){
                    console.log(response);
                }
            });
            return false;
        });
    });
</script>

报错如下图所示：

解决办法

• ajax里添加属性processData: false,，这句意思是让jquery不要处理提交的数据，否则jquery会试图把数据处理成一个用「&」符连接起来的字符串，然而我们的formData是一个对象呀，所以jquery处理不了就报错了。
• 实际上我们还需要加另一个属性contentType: false否则默认的content-type的值是application/x-www-form-urlencoded; charset=UTF-8肯定是不对的，而如果我们主动加content-type:multipart/form-data也是不对的，因为这不是在form表单上，而是ajax，因为实际上传文件的content-type是这样的形式multipart/form-data;，后面那串boundary=----WebKitFormBoundarywABPFuYfd3AW7n3l应该是浏览器自动加上的（如果有谁更清楚这个原理，欢迎在评论里补充）

正确代码如下：

<form id="upload-form">
    <div class="field">
        <input type="file" name="photo" accept="image/*">
    </div>
    <div class="field">
        <input type="text" name="words">
    </div>
    <div class="submit-btn">
        <input type="button" value="submit">
    </div>
</form>

<script>
    $(document).ready(function(){
        $('input[type="button"]').on('click', function(){
            var formData = new FormData();
            formData.append('photo', $('input[name="photo"]').get(0).files[0]);
            formData.append('words', $('input[name="words"]').val());
            $.ajax({
                type:'post',
                url:'./upload.php',
                data: formData,
                //contentType必须为false（否则就会默认为application/x-www-form-urlencoded; charset=UTF-8，而对于上传文件这个肯定是错的）
                contentType: false,
                //告诉jquery不要处理数据（否则会报错：Uncaught TypeError: Illegal invocation）
                processData: false,
                success:function(response){
                    console.log(response);
                }
            });
            return false;
        });
    });
</script>

本文部分参考：浅谈ajax上传文件属性contentType = false