XHR Level2 和 jQuery 用于文件上传

Question

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

Answer 1

在 JQuery 的新版本中，原始 xhr 对象包装在 jqXhr 对象中，该对象没有对 xhr 的新上传属性的任何引用，并且在文档中也不太清楚如何做到这一点。 我发现这样做的方式是：

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，然后我测试它是否具有属性 upload 来绑定进度事件以控制进度条（HTML5？）。其他设置允许我通过 jquery ajax 将表单作为 FormData 对象发送。

Answer 2

对 DannYO 的回答稍作修改。我制作了一个 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);
});