Question

使用HTML5的File API，上传是通过upload中名为XMLHttpRequest的对象进行的。 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是一个等价的吗？。我试图让代码尽可能干净，并且尽可能跨浏览器兼容，因为每当微软认为这是一个好主意时（尽管它听起来像it will be in 2012 or 2013）。

Answer 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);

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的其他插件。

jQuery相当于XMLHttpRequest的上传？

2 个答案: