Question

如何从jQuery Ajax访问原始XHR对象？问题是，新的XMLHttpRequest Level 2规范提供了一个名为upload的XHR的子属性，但显然jQuery尚未拥有它。我想继续使用jQuery Ajax，但我不知道如何将新功能与当前的jQuery库合并。

Answer 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对象发送。

Answer 2

对DannYOs的一点修改回答。我制作了一个jQuery插件，您可以在文件输入上调用它以使其更简单。您只需将上传脚本，成功函数和进度函数传递给它。

$.fn.upload = function(remote,successFn,progressFn) {
    return this.each(function() {

        var formData = new FormData();
        formData.append($(this).attr("name"), $(this)[0].files[0]);

        $.ajax({
            url: remote,
            type: 'POST',
            xhr: function() {
                myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload && progressFn){
                    myXhr.upload.addEventListener('progress',progressFn, false);
                }
                return myXhr;
            },
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            complete : function(res) {
                if(successFn) successFn(res);
            }
        });
    });
}

用法

$(".myFile").upload("upload.php",function(res) {
    console.log("done",res);
},function(progress) {
    console.log("progress", progress);
});

XHR Level2使用jQuery进行文件上传

2 个答案: