小编典典

XHR Level2和jQuery用于文件上传

ajax

如何从jQuery Ajax访问原始XHR对象?事实是,新的XMLHttpRequest Level
2规范提供了XHR的子属性,称为上载,但是jQuery显然还没有。我想继续使用jQuery Ajax,但不知道如何将新功能与当前jQuery库合并。


阅读 263

收藏
2020-07-26

共1个答案

小编典典

在新版本的JQuery中,原始xhr对象包装在jqXhr对象中,该对象没有对xhr的新上载属性的引用,并且在文档中也不清楚如何执行此操作。我发现这样做的方法,并进行了一些额外的设置来成功完成jquery-
ajax-HTML5文件上传器的操作是:

var formData = new FormData($('#myForm')[0]);
$.ajax({
    url: 'upload.php',
    type: 'POST',
    xhr: function() {
        myXhr = $.ajaxSettings.xhr();
        if(myXhr.upload){
            myXhr.upload.addEventListener('progress',progressHandlerFunction, false);
        }
        return myXhr;
    },
    data: formData,
    cache: false,
    contentType: false,
    processData: false
});

使用$
.ajaxSettings.xhr()获得原始的xhr,然后测试它是否具有上载属性以绑定进度事件以控制进度(HTML5?)栏。其他设置允许我通过jquery
ajax将表单作为FormData对象发送。

2020-07-26