javascript - マルチパートを使用せずに AJAX を使用してファイルをアップロードするにはどうすればよいですか?

Question

私のアプリがユーザーにアップロードできる唯一のファイルは画像であり、それらは常にフォームの唯一の入力フィールドとしてアップロードされます。したがって、マルチパートは不要であり、マルチパート パーサーがなくてもファイルをより簡単に使用できます。

AJAXとバニラJavascriptを使用してマルチパートを使用せずにファイルをアップロードするにはどうすればよいですか? また、通常、すべてのブラウザの最新バージョンをサポートする必要があります。

Answer 1

関連するファイルまたは Blob 自体を XHR レベル 2 経由で簡単に送信できます。たとえば、私が管理しているアップロード ライブラリ ( Fine Uploader ) では、マルチパート エンコードされた POST 要求 (すべてのブラウザー) または非 MPE 要求 (ブラウザーのみ) でファイルを送信することを選択できます。 File API をサポートするブラウザー)。

MPE POST リクエストでファイルを送信するには、すでにご存知かもしれませんが、ファイルを FormData オブジェクトに追加して XHR2 経由で送信するか、ファイル入力を含むフォームを送信する必要があります。非 MPE POST リクエストでファイルをアップロードする場合は、次のようにします。

xhr.send(file);

もちろん、これは File API をサポートするブラウザーでのみ実行できます。また、ファイルとともにパラメーターを送信する場合は、それらをクエリ文字列に含める必要があります。