通過原型Ajax調用提交二進制數據

Question

我正在使用Prototype提交POST請求，並且postdata包含許多字段，其中之一是來自文件的二進制數據（在這種情況下，用戶已選擇要上傳的Excel電子表格）。

我正在使用HTML5 FileReader接口通過FileReader.readAsBinaryString()來獲取文件的內容，效果很好。 如果我使用charCodeAt()在字符串中打印各種字符，則它們將帶有預期值。

但是，一旦我將此字符串數據放入對象（以及其他表單字段）中，並將其作為parameters選項傳遞給Prototype的Ajax.Request() ，數據就會損壞。 某些字符值（例如0x82被替換為0xC2 0x82 0xAC被替換為0xC2 0xAC ，依此類推。

我嘗試使用window.atob()對字符串進行base64編碼，但這因InvalidCharacterError: String contains an invalid character而失敗InvalidCharacterError: String contains an invalid character ，因此顯然需要進行某種處理。

有誰知道如何通過Prototype的Ajax.Request()傳遞二進制數據，同時在同一請求中還包含其他表單字段？

Answer 1

要上傳ajax文件，您實際上應該使用FormData對象

var data = new FormData();
//var data = new FormData(someForm); if all your fields is in an html form
// add fields to form
data.append('fieldname',fieldvalue);
data.append('filefieldname',fileobject);
//etc

new Ajax.Request(url, {
    contentType: null,
    method: 'post',
    postBody: data,
    onSuccess: successFunction
})

通過這種方法，服務器將看到請求，就像請求是由屬性為enctype="multipart/form-data"

Answer 2

這樣做需要魔術和小塵。 （不是真的）

首先，您需要將表單字段值作為URL參數而不是POST放置，然后用文件內容覆蓋帖子正文。 例如

new Ajax.Request('/url.php?rawupload=1&id='+$F('id')+'&label='+label,
    {
        'method':'post',
        'postBody':fileobject,
        'onSuccess':function() { alert('success'); }
    });

fileobject是從文件上傳輸入元素中檢索到的HTML5文件對象

是的，如果您有很多表單字段，它不是最優雅的解決方案。 如果您確實有很多表單字段來構建查詢字符串，而不必手動進行操作，則也可以使用Hash#toQueryString

http://api.prototypejs.org/language/Hash/prototype/toQueryString/