xmlHttpRequestでマルチパートとしてファイルを送信

Question

XMLHttpRequestでマルチパートとしてファイルをサーブレットに送信できますか？私はフォームを作成して、それを複数パートとして送信していますが、どういうわけか、それをアップロードするための応答が得られません。私はページをリフレッシュしたくないので、それはajaxによって行われなければなりません。

Answer 1

これは、XHR FormData API（以前は「XHR2」または「XHRレベル2」の一部であり、現在は「XHR拡張機能」として知られています）でのみ可能です。

var formData = new FormData(); 
formData.append("myFile", document.getElementById("myFileField").files[0]); 

var xhr = new XMLHttpRequest(); 
xhr.open("POST", "myServletUrl"); 
xhr.send(formData); 

XHRは、適切なヘッダとリクエストボディのエンコーディングについての世話をすると、ファイルは、この例ではで利用できるようになります：あなたは以下のようにそれをアップロードすることができ、このHTML、

<input type="file" id="myFileField" name="myFile" /> 

を考えると

サーバー側は、myFileという名前の部分がform-dataとなっています。

FormData APIは古いブラウザではサポートされていないことに注意してください。 caniuse.comには、現在Chrome 7以上、Firefox 3.5以上、Safari 5以上、IE 10以上、Opera 12以上で実装されていることがわかります。

代わりに、jQuery Form pluginを使用することもできます。書かれたJavaScriptコードの任意の行せずに適切に機能してあなたの全体の形は、その後、すぐにちょうど次の行でajaxifiedされます。

$("#formId").ajaxForm(function(response) { 
    // Handle ajax response here. 
}); 

また、非表示のiframeのトリックによってだけでなく、ファイルのアップロードをサポートしています。詳細な説明については、this jQuery Form documentationも参照してください。通常の（同期）リクエストとajax（非同期）リクエストの両方で傍受できるようにサーブレット・コードを変更するだけで済みます。具体的な例のためにも、この答えを参照してください：次のようにSimple calculator with JSP/Servlet and Ajax

いずれにせよ、アップロードされたファイルは、@MultipartConfigサーブレットのdoPost()方法で利用できるようにする必要があります

Part myFile = request.getPart("myFile"); 

をそれともサーブレットに残っている場合2.5またはそれ以上、Apache Commons FileUpload通常の方法を使用します。 How to upload files to server using JSP/Servlet?

Answer 2

これは、XHRでmultipart/form-dataを送信することはできません（更新：それはXHR2と最近のブラウザで可能ですがをBalusCの回答を参照してください。）。

これを達成する一般的な方法は、普通のformを使用し、代わりにiframeを使用することです。この方法では、アップロード時にiframeのみが更新されます。