jQuery相当于XMLHttpRequest的上传？答案

【问题标题】：jQuery equivalent to XMLHttpRequest's upload?jQuery相当于XMLHttpRequest的上传？
【发布时间】：2011-07-06 15:42:29
【问题描述】：

使用 HTML5 的文件 API，上传是通过 XMLHttpRequest 中名为 upload 的对象进行的。 This 是我正在使用的教程（以及 Google cache mirror，因为它目前已关闭）。这是相关部分：

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

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

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

我的问题是：有 jQuery 等价物吗？。我试图让代码尽可能干净并尽可能兼容跨浏览器，因为只要 Microsoft 认为这是个好主意（尽管听起来像 it will be in 2012 or 2013）。

【问题讨论】：

您是在寻找 jQuery 插件还是想了解 jQuery XHR 包装器是否支持此功能？
@justkt 我正在寻找 jQuery 中的内置选项，不过，如果不可用，插件会很好。谢谢。
如果您已经在使用 HTML5，那么您并没有认真考虑跨浏览器的兼容性，因此只需针对有效的内容进行构建，并有一条消息告诉人们使用其中一种工作浏览器。 CSS3 也是如此。
IE9 同时支持 XMLHttpRequest 和 addEventListener 方法。我认为您应该测试xhr.upload 是否存在并完成它。无需使用 jQuery 包装您的代码。
@Endophage 好的，感谢您的评论。当然，我有一个备用方案。

标签： javascript jquery ajax upload

【解决方案1】：

这是我想出的解决问题的方法。 $.ajax() 调用允许提供一个回调来生成 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);

【讨论】：

这是一个很好的答案，但是必须发送编码为数据参数的 base64 感觉有点不对劲。但是它是一个非常有创意的解决方案，虽然它不在 jQuery 核心上。
不保留二进制字符串 -> 如in this answer 所述，可以根据规范执行此行为。 XMLHttpRequest.prototype.sendAsBinary 方法被 here 覆盖。在 jQuery 中，通过 xhr 设置覆盖 .send 方法，使用前面的答案（参见 this answer）。

【解决方案2】：

jqXHR 的documentation（从 jQuery 的 .ajax() 调用返回的 XMLHttpRequest 的超集）没有将更新功能描述为公开，这并不意味着它没有公开。不过，This question 似乎表明上传未公开。答案提供了一种访问本机 XMLHttpRequest 对象的方法。

在 jQuery 1.5 之前的版本中，XMLHttpRequest 对象是直接公开的，因此您可以访问浏览器支持的任何特性。 This tutorial 用于构建拖放上传器就是这样做的。

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

【讨论】：