javascript - 使用 Kendo UI 上传控件将请求 header 添加到 XmlHttpRequest

Question

我正在尝试使用 Telerik 提供的代码将请求 header 添加到 XHR，但出现以下错误。

“0x800a139e - JavaScript 运行时错误:InvalidStateError”

这是代码

$(document).ready(function () {
                        $("#file").kendoUpload({
                            multiple: false,
                            async: {
                                saveUrl: "save",
                            },
                            upload: onUpload,

                        });
                    });

function onUpload(e) {
                        var xhr = e.XMLHttpRequest;
                        if (xhr) {
                            xhr.addEventListener("readystatechange", function (e) {
                                if (xhr.readyState == 1 /* OPENED */) {
                                    xhr.setRequestHeader("X-Foo", "Bar");
                                }
                            });
                        }
                    }

Answer 1

事实证明，Internet Explorer 使用 readyState 1 触发 readystatechange 两次，第二次执行处理程序导致错误。作为当前情况的解决方法，您可以命名已执行的处理程序并在第一次执行后解除绑定(bind)。

function onUpload(e) {
                    var xhr = e.XMLHttpRequest;
                    if (xhr) {
                        xhr.addEventListener("readystatechange", function onUploadReady(e) {
                            if (xhr.readyState == 1 /* OPENED */) {
                                xhr.setRequestHeader("X-Foo", "Bar");
                                xhr.removeEventListener("readystatechange", onUploadReady);
                            }
                        });
                    }
                }