使用純JavaScript上傳二進制文件

Question

我正在使用HTML5 Filesystem API的Chrome應用程序，並允許用戶導入和同步文件。我遇到的一個問題是，如果用戶嘗試同步圖像文件，則在上載過程中文件會損壞到服務器。我假設這是因爲它們是二元的。

對於上傳，我選擇了只是做一個Ajax POST請求（使用MooTools），然後把文件內容作爲請求的主體。我告訴MooTools關閉urlEncoding並將字符集設置爲「x-user-defined」（不確定是否有必要，我只是在某些網站上看到它）。

鑑於Chrome不支持xhr.sendAsBinary，有沒有人有任何示例代碼可以讓我通過Ajax發送二進制文件？

Answer 1

FF's xhr.sendAsBinary()不是標準配置。 XHR2支持發送文件（xhr.send(file)）和斑點（xhr.send(blob)）：

function upload(blobOrFile) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open('POST', '/server', true); 
    xhr.onload = function(e) { ... }; 

    // Listen to the upload progress. 
    xhr.upload.onprogress = function(e) { ... }; 

    xhr.send(blobOrFile); 
} 

您也可以發送ArrayBuffer。

Answer 2

如果您正在編寫服務器，那麼您只需將讀取的字節轉換爲純文本，然後將其發送到服務器，然後將其解碼。

這裏是最簡單的方法（不是很有效，但是這只是爲了顯示技術） -

每次從文件中讀取的字節轉換成兩個十六進制字符的字符串。如果讀取字節53（十進制），然後將其轉換爲「45」（53的十六進制表示）。將所有這些字符串連接在一起，並將結果字符串發送到服務器。

在服務器端，在偶數位置打破字符串，將每對數字轉換爲一個字節。