jQuery相当于XMLHttpRequest的上传？

Question

使用HTML5的文件API，通过XMLHttpRequest中的upload对象进行上传。 这个教程是我正在使用的（以及Google缓存镜像，因为它当前无法访问）。 这是相关的部分：

// Uploading - for Firefox, Google Chrome and Safari
xhr = new XMLHttpRequest();

// Update progress bar
xhr.upload.addEventListener("progress", function (evt) {

正如您所看到的，要跟踪上传进度，XMLHttpRequest 对象有一个名为 upload 的属性，我们可以添加事件处理程序。

我的问题是：jQuery 有一个等效方法吗？我试图让代码尽可能简洁和跨浏览器兼容，以备 Microsoft 认为这是个好主意的时候（尽管听起来像是在 2012 或 2013 年）。

- metrobalderas

---

你是在寻找一个jQuery插件，还是想了解jQuery XHR包装器是否支持此功能？ - justkt

@justkt 我正在寻找jQuery中的内置选项，如果没有的话，插件也可以。谢谢。 - metrobalderas

如果你已经在使用HTML5，那么你不需要过分考虑跨浏览器兼容性，只需构建可正常工作的内容，并添加一条消息告诉用户使用其中一个可用的浏览器。对于CSS3同样适用。 - Endophage

IE9支持XMLHttpRequest和addEventListener方法。我认为你只需要测试xhr.upload是否存在，就可以完成它了。没有必要用jQuery包装你的代码。 - gonchuki

@Endophage 好的，谢谢您的评论。当然，我有备用方案。 - metrobalderas

@gonchuki，是的，我非常清楚这一点。但我正在寻找的是一种让jQuery为我创建XMLHttpRequest对象并处理所有其他事情的方法。 - metrobalderas

Answer 1

这是我想到的解决方法。 $.ajax() 调用允许提供一个回调函数来生成 XHR。 我只是在请求之前生成一个XHR，设置它，然后创建一个闭包，在 $.ajax() 需要时返回它。 如果他们通过 jqxhr 提供访问权限那就会简单得多，但他们没有。

var reader = new FileReader();

reader.onloadend = function (e) {
    var xhr, provider;

    xhr = jQuery.ajaxSettings.xhr();
    if (xhr.upload) {
        xhr.upload.addEventListener('progress', function (e) {
            // ...
        }, false);
    }   
    provider = function () {
        return xhr;
    };  

    // Leave only the actual base64 component of the 'URL'
    // Sending as binary ends up mangling the data somehow
    // base64_decode() on the PHP side will return the valid file.
    var data = e.target.result;
    data = data.substr(data.indexOf('base64') + 7); 

    $.ajax({
        type: 'POST',
        url: 'http://example.com/upload.php',
        xhr: provider,
        dataType: 'json',
        success: function (data) {
            // ...
        },  
        error: function () {
            // ...
        },  
        data: {
            name: file.name,
            size: file.size,
            type: file.type,
            data: data,
        }   
    }); 
};  
reader.readAsDataURL(file);

- Louis-Philippe Huberdeau

---

这是一个很好的答案，但是必须将base64编码作为数据参数发送感觉有点不对...然而，这是一个非常有创意的解决方案，尽管它不在jQuery核心中。 - metrobalderas

二进制字符串不被保留 -> 这种行为可以从规范中进行，如此答案所解释。XMLHttpRequest.prototype.sendAsBinary方法在这里有详细介绍。在jQuery中，通过使用先前的答案，通过xhr设置覆盖.send方法（请参见此答案）。 - Rob W

Answer 2

jqXHR的文档（从jQuery的.ajax()调用返回的XMLHttpRequest的超集）没有描述更新功能是否公开，这并不意味着它没有被公开。然而，这个问题似乎表明上传未公开。答案提供了一个方法来获取本机XMLHttpRequest对象。

在jQuery 1.5之前的版本中，XMLHttpRequest对象直接公开，因此您可以访问浏览器支持的任何功能。 这个教程为构建拖放上传程序做到了这一点。

搜索jquery html 5 file upload会出现使用HTML 5文件API进行多文件上传的这个插件，但是该插件目前无法在IE中使用。如果您不想使用HTML 5，而是希望立即跨浏览器支持，您可以在jQuery插件网站上查找其他插件。

- justkt