是什么导致了“未捕获的类型错误:非法调用”?在这段代码中

What is causing "Uncaught TypeError: Illegal Invocation" in this code?

本文关键字:调用 段代码 代码 非法 错误 类型 是什么      更新时间:2023-09-26

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和控制器,如果这可能是问题的一部分。

您缺少$.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错误。