使用Kendo UI Upload控件将请求标头添加到XmlHttpRequest

Question

我尝试使用Telerik提供的代码向XHR添加请求标头，但我收到以下错误。

＆＃34; 0x800a139e - JavaScript运行时错误：InvalidStateError＆＃34;

这是代码

$(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两次，第二次执行处理程序会导致错误。作为当前案例的解决方法，您可以命名执行的处理程序并在第一次执行后取消绑定它。

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);
                            }
                        });
                    }
                }