XMLHttpRequestレベル2でファイルフォームの提出をシミュレートします。

Question

私の現在のページでは、入力エレメントを使用して古いファイルを使用しています。しかし、今私は記事のその非常に良いシリーズからドラッグ&のドロップを実装しました：http://www.sitepoint.com/html5-file-drag-and-drop/

1つの障害があります。私はファイルとサーバー側のサービス（Javaのappspot.com）でフォームを提出していたページを書き直す前に、私はまだそのサービスを利用したいとDBなどに保存、ファイルを取得するすべての魔法をしました。しかしXMLHttpRequestを使うためにファイルのアップロードを書き直した後、私のコードは単にファイルをコンテンツに書き込むのに対して、サービスはフォームを期待しています。

XMLHttpRequestでmiltipart/form-dataフォームの送信を模倣する方法はありますか？

Answer 1

FormDataオブジェクトは、multipart/form-dataフォームを送信するために使用できます。

基本例：文字列がXMLHttpRequestインスタンスの.send()メソッドに渡されるとき

var fd = new FormData(); // Optionally: new FormData(htmlFormElement); 
fd.append('key', 'value'); 
fd.append('file', reference_to_File_object); 
        //^Example: .files property of an <input type="file" 

var xhr = new XMLHttpRequest(); 
xhr.open('post', '/postdata', true); 
xhr.send(fd); 

、それは次に、UTF-8としてエンコードされ、ユニコードにに変換されます。つまり、カスタムのmultipart/form-data実装は、文字列を使用して、しばしば正しく動作しません。