是什么导致此代码中的“Uncaught TypeError: Illegal Invocation”？

Question

谷歌浏览器的控制台告诉我

未捕获的类型错误：非法调用

当下面的函数被调用时

   $('#txtUploadFile').on('change', function (e) {
        var files = e.target.files;
        if (files.length > 0) {
            if (window.FormData !== undefined) {
                var data = new FormData();
                for (var x = 0; x < files.length; x++) {
                    data.append("file" + x, files[x]);
                }

                $.ajax({
                    xhr: function() {
                        var xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener("progress", function(evt) {
                            if (evt.lengthComputable) {
                                var percentComplete = evt.loaded / evt.total * 100;
                                console.log("percentComplete = " + percentComplete);
                            }
                            else
                            {
                                console.log("lengthComputable evaluated to false;")
                            }
                        }, false);

                        xhr.addEventListener("progress", function(evt) {
                            if (evt.lengthComputable) {
                                var percentComplete = evt.loaded / evt.total * 100;
                                console.log("percentComplete = " + percentComplete);
                            }
                            else
                            {
                                console.log("lengthComputable evaluated to false;")
                            }
                        }, false);

                        return xhr;
                    },
                    type: 'POST',
                    url: '@Url.Action("upload","FileUploadAsync")',
                    data: data,
                    success: function(data){
                        console.log("success!");
                    }
                });
            } else {
                alert("This browser doesn't support HTML5 file uploads!");
            }
        }
    });

我查看了有关此问题的 StackOverflow 帖子，但没有任何原因与我在我的文章中看到的任何内容有关。我不确定这是否重要，但如果这可能是问题的一部分，我可以发布 HTML 和控制器。

Answer 1

$.ajax 调用缺少两个选项，这些

contentType: false,
processData: false,

变成这样

$.ajax({
    xhr: function () {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total * 100;
                console.log("percentComplete = " + percentComplete);
            } else {
                console.log("lengthComputable evaluated to false;")
            }
        }, false);

        xhr.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total * 100;
                console.log("percentComplete = " + percentComplete);
            } else {
                console.log("lengthComputable evaluated to false;")
            }
        }, false);

        return xhr;
    },
    type: 'POST',
    url: '@Url.Action("upload","FileUploadAsync")',
    data: data,
    contentType: false,
    processData: false,
    success: function (data) {
        console.log("success!");
    }
});

如果让 jQuery 在内部处理文件，则会引发 Illegal invocation 错误。