javascript - 这段代码中出现 "Uncaught TypeError: Illegal Invocation"的原因是什么？

Question

Google Chrome 浏览器的控制台告诉我

Uncaught TypeError: Illegal Invocation

当调用以下函数时

   $('#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 和 Controller 。

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 在内部处理文件，它会抛出非法调用错误。