Chrome WebKitBlobBuilderはデータを追加しません

Question

私はajaxリクエストによってファイルアップロード機能を実装しています。 1つのAjax呼び出しで複数のファイルを送信できるようにしたいので、FormDataを使用することにしました。

バイナリデータ文字列を直接FormDataに追加しようとしましたが、それは機能しますが、Content-Dispositionにはファイル名属性がありません。 Content-Disposition：form-data;

W3Cは、私はその属性を持っている（またはFormData.append（）の第三属性でそれを設定できるようにする）

I FORMDATAにBLOBオブジェクトを追加する必要があると述べている=「FILE1」という名前を付けます次のコードを書いた：

function uploadAsBinary() { 
    var xhr = new XMLHttpRequest(); 
    var fd = new FormData(); 

    window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder; 
    var bb = new window.BlobBuilder(); 
    bb.append("this is my binary content"); 
    var blob = bb.getBlob("text/plain"); 

    fd.append("file1", blob, "file1"); 

    xhr.open("POST", "/mb/0/", false); 
    xhr.send(fd); 
} 

をそれがFirefoxで完璧に動作しますが、Googleのクロム（V16とV17）で、要求ペイロードはそれでコンテンツなしFORMDATAです：

------WebKitFormBoundaryVkgESMAGtmPMlPZ7 
Content-Disposition: form-data; name="file1"; filename="file1" 
Content-Type: text/plain 


------WebKitFormBoundaryVkgESMAGtmPMlPZ7-- 

私は同じ結果をArrayBufferでBLOBに書き込もうとしました。 私は今2日間ウェブをサーフィンしていますが、答えは見つかりませんでした。私はアンドロイド（http://code.google.com/p/android/issues/detail?id=22441）のオープンな問題を発見しましたが、それはかなり死んでいるようです。

これは実際のクロムの問題ですか？誰かがこれについての手掛かりを持っているのですか、またはクロムトラッカーで問題を開くべきですか？

あなたの助けにはThx！

window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || 
       window.MozBlobBuilder || window.MSBlobBuilder; 
window.URL = window.URL || window.webkitURL; 

var bb = new BlobBuilder(); 
bb.append('body { color: red; }'); 
var blob = bb.getBlob('text/css'); 

var link = document.createElement('link'); 
link.rel = 'stylesheet'; 
link.href = window.URL.createObjectURL(blob); 

document.body.appendChild(link); 

ブロブ（）：

ここに解決策を探している人のために

Answer 1

、問題がexplained here

BlobBuilder（）などのBlob（）ではなくBlobBuilder（）への切り替えは、次のとおりです。

window.URL = window.URL || window.webkitURL; 

var blob = new Blob(['body { color: red; }'], {type: 'text/css'}); 

var link = document.createElement('link'); 
link.rel = 'stylesheet'; 
link.href = window.URL.createObjectURL(blob); 
document.body.appendChild(link); 

Answer 2

TL; DR Chrome開発ツールは、データペイロードプレビューのファイルデータをクリップするように見えます。 BlobBuilderからBlobに切り替えると問題は解決しますが、ペイロードのプレビューにはファイルデータが表示されません。あなたが投稿したものと同じように見えます（明らかに空です）。

あなたが記述した症状は、欺瞞的です。私も同様の問題に遭遇しました（それはContent-Typeの間違った過負荷によって引き起こされましたが、私は逃げ出します）。

私の問題が解決されたとき、私はChrome開発ツールがキー/バリューデータを表示していて、ファイルデータは表示していないことに気付きました。ファイルデータがないのに対し、「プレーン」のデータuploadType=mediaが現れ

------WebKitFormBoundaryHyzYwSEV4FAfvi02 
Content-Disposition: form-data; name="uploadType" 

media 
------WebKitFormBoundaryHyzYwSEV4FAfvi02 
Content-Disposition: form-data; name="fileupload"; filename="blob" 
Content-Type: application/zip 


------WebKitFormBoundaryHyzYwSEV4FAfvi02-- 

お知らせ：大きなファイルをアップロードするとき、私はこのような何かを得るでしょう。ファイルが正常にアップロードされたことを確認した唯一の方法（最終的にサーバーから成功コードを取得する以外）は、要求が完了した後にリクエストヘッダーでChrome開発ツールの[ネットワーク]タブを調べることでした。content-length: 1023235と表示され、おそらく空ファイルのペイロードよりもはるかに大きなものでした。