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

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>

报错如下图所示:
Xnip2018-09-14_20-16-31.png

解决办法

  • 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

打赏

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of

扫码在手机查看
iPhone请用自带相机扫
安卓用UC/QQ浏览器扫

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