通過jQuery.ajax

Question

在張貼FORMDATA的Blob我已經看到了這個問題問了很多次，但像我試試，我仍然看到沒有結果：

我如何可以追加一個斑點，形成數據並通過jquery發佈它？

var reader = FileReader(); 
reader.readAsBinaryString(f); 
reader.onload = function() { 
    var slice = reader.result.slice(0,100, {type: "application/octet-stream"}); 

    var formdata = new FormData(); 
    formdata.append("blobData", slice); // I have verified via console.log(slice) that this has data 
    formdata.append("blobName", "Photo"); 

    send(formdata); 
} 

function send(data) { 
    $.ajax({ 
     url: "/upload", 
     type: "POST", 
     data: data,  
     cache: false, 
     contentType: false, 
     processData: false 
    }); 
} 

所有非blob鍵/值都在請求中，甚至是blob的鍵......但不是blob數據。

有趣的是，當我發佈使用Firefox，而不是瀏覽器，我得到的數據的一點點那裏..但不多（這應該是高達2 MB有價值的數據......這是7字節）

Answer 1

我最近遇到這個確切的問題，並有解決方案。

核心問題是reader.result傳遞給reader.onload的值通過readAsBinaryString是一個字符串，而不是一個blob。聽起來很明顯，但我也認爲我正在做一個blob。由於String和Blob對象都有一個分片方法變量slice，同時設置數據看起來像二進制數據，但仍然只是一個字符串。 String.slice（）方法與Blob.slice（）方法完全相同，只是忽略了第三個參數，這就是爲什麼你不會注意到實際發生了什麼。

根據FormData spec將任何非Blob或File對象的值轉換爲字符串。看起來slice字符串在第一個非ASCII字符處被截斷（我只是在猜測確切的原因，但重要的一點是字符串被附加到formdata後被絕對截斷）。

的解決方案是reader.result轉換成團塊第一：

reader.onload = function() { 
    var blob = new Blob([reader.result]), 
     slice = blob.slice(0,100, {type: "application/octet-stream"}); 

    var formdata = new FormData(); 
    formdata.append("blobData", slice); 
    formdata.append("blobName", "Photo"); 

    send(formdata); 
} 

（該陣列斑點構造一個要求）。

現在slice是一個blob，因爲Blob.slice（）方法返回一個Blob對象，並且可以追加到formdata而不會被字符串轉換弄壞。