XHR Level2使用jQuery进行文件上传

How can I access the raw XHR object from jQuery Ajax? The thing is, the new XMLHttpRequest Level 2 specification provides a sub-property of XHR called upload but apparently jQuery doesn't have it yet. I want to keep using jQuery Ajax but I don't know how to merge the new functionality with current jQuery library.

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

2 个解决方案

#1

In new versions of JQuery the raw xhr object is wrapped in jqXhr Object which doesn't have any reference to the new upload property of the xhr and in the documentation is not very clear how to do it either. the way I found to do this, with some extra settings to get a successful jquery-ajax-HTML5 file uploader was:

在新版本的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
});

with $.ajaxSettings.xhr() I get the origianal xhr, then I test if it has the property upload to bind a progress event to control a progress(HTML5?) bar. The other settings allow me to send via jquery ajax the form as a FormData object.

使用$ .ajaxSettings.xhr（）我得到了原始的xhr，然后我测试它是否有属性上传来绑定进度事件来控制进度（HTML5？）栏。其他设置允许我通过jquery ajax将表单作为FormData对象发送。

#2

A little modification to DannYOs answer. I made a jQuery plugin that you can call on a file input to make it simpler. You just pass it your upload script, then your success function and then your progress function.

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

Usage

用法

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