web-dev-qa-db-ja.com

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

ファイルをXMLHttpRequestによってマルチパートとしてサーブレットに送信できますか？フォームを作成してマルチパートとして送信していますが、どういうわけか、アップロードに成功したことに対する応答が得られません。ページを更新したくないので、ajaxで実行する必要があります。

javascriptajaxservletsfile-uploadmultipart
24
Tejasva Dhyani

これは、XHR FormData AP​​I （以前は「XHR2」または「XHR Level 2」の一部として知られており、現在「XHR Advanced Features」として知られている）でのみ可能です。

このHTMLを考えると、

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

以下のようにアップロードできます：

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

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

XHRは適切なヘッダーとリクエストボディエンコーディングを処理し、この例では、ファイルはmyFileという名前の_form-data_部分としてサーバー側で利用できます。

古いブラウザではFormData AP​​Iがサポートされていないことに注意する必要があります。 caniuse.com で、Chrome 7 +、Firefox 3.5 +、Safari 5 +、IEで現在実装されていることがわかります。 10+およびOpera 12+。

別の方法は、 jQuery Formプラグイン を使用することです。 JavaScriptコードを何行も書かずにフォーム全体を記述して適切に機能させると、次の行だけで即座にajax化されます。

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

また、非表示のiframeトリックによるファイルのアップロードもサポートしています。詳細な説明については、 このjQueryフォームのドキュメント も参照してください。通常の（同期）要求とajax（非同期）要求の両方でインターセプトできるように、サーブレットコードを変更するだけでよい場合があります。具体的な例については、この回答も参照してください。 JSP/ServletとAjaxを使用した単純な計算機

いずれにせよ、アップロードされたファイルは、次のように _@MultipartConfig_ サーブレットのdoPost()メソッドで利用可能になります。

_Part myFile = request.getPart("myFile");
_

または、まだサーブレット2.5以前を使用している場合は、Apache Commons FileUploadを通常の方法で使用します。具体的な例については、この回答も参照してください。 JSP/Servletを使用してファイルをサーバーにアップロードする方法

58
BalusC

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

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

3
Linus Gustav Larsson Thiel