jQuery等價於XMLHttpRequest的上傳？

使用HTML5的File API，通過XMLHttpRequest中的名爲upload的對象進行上載。 This是我正在使用的教程（以及Google cache mirror，因爲它現在處於關閉狀態）。這是有關部分：jQuery等價於XMLHttpRequest的上傳？

// 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），但我試圖儘可能保持代碼的清潔和跨瀏覽器兼容性。

來源

2011-03-01 metrobalderas

你正在尋找一個jQuery插件或找出jQuery XHR包裝器是否支持這種功能？ – justkt 2011-03-01 16:46:26

@justkt我正在尋找一個jQuery的內置選項，如果不可用的話，一個插件將會很好。謝謝。 – metrobalderas 2011-03-01 16:52:08

如果您已經在使用HTML5，那麼您並沒有認真考慮跨瀏覽器的兼容性，因此只需構建工作內容併發出一條消息，告訴人們使用其中一個工作的瀏覽器即可。 CSS3也是如此。 – Endophage 2011-03-01 16:52:19

這是我想出來解決這個問題。 $ .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);

來源

2011-06-06 13:12:08

這是一個很好的答案，但不得不發送base64編碼爲數據參數感覺有點錯誤..但它是一個非常有創意的解決方案，但它不在jQuery核心上。 – metrobalderas 2011-06-15 18:58:13

二進制字符串不保留 - >此行爲可以從規範中進行，如[在本答案中]所述[http://stackoverflow.com/a/10073841/938089?xmlhttprequest-multipart-related-post-with-xml -and-圖像作爲有效載荷）。 'XMLHttpRequest.prototype.sendAsBinary'方法在[here]（http://stackoverflow.com/a/9250818/938089）中有介紹。在jQuery中，使用前面的答案，通過'xhr'設置覆蓋'.send'方法（參見[這個答案]（http://stackoverflow.com/q/4303448?how-to-override-jquerys-use-的-的XMLHttpRequest功能於阿賈克斯））。 – 2012-06-07 08:04:06

對於jqXHR（從jQuery的.ajax（）調用返回的XMLHttpRequest的超集）documentation不會將更新功能描述爲暴露，這並不意味着它不公開。但是，This question似乎表明上傳沒有公開。答案提供了一種獲取本機XMLHttpRequest對象的方法。

在jQuery 1.5之前的版本中，XMLHttpRequest對象直接公開，因此您可以訪問瀏覽器支持的任何功能。用於構建拖放上傳器的This tutorial就是這麼做的。

搜索jquery html 5 file upload調出this plugin使用HTML 5文件API進行多文件上傳，但是此插件目前不能在IE中使用。如果您不想使用HTML 5，而是希望現在支持跨瀏覽器，那麼您可以在jQuery插件網站上查看jQuery的其他插件。

來源

2011-03-01 17:01:28 justkt

jQuery等價於XMLHttpRequest的上傳？

回答

相關問題