Ajaxを利用してファイルアップロードする。
今回はFormDataを利用してファイルをアップロードする。
FormData は XMLHttpRequest Level 2 でサポートされたもので、Ajaxでの値の送信をより簡単な物にしてくれる。
FormDataの使い方
FormDataの使い方は簡単で、new して append するだけ。
値をappendした FormData オブジェクトは、ajaxのdataにセットするだけ。
[gist id=7837870]
FormDataについては以下を参照
FormData でファイルの送信をする
FormData は、Ajaxを使ったファイルアップロードも簡単に書ける。
こんな感じの簡単なformを作る。
[gist id=7837881]
jsはajaxを使ってファイルを送信するのでこんな感じ。
今回の例は、fileフィールドが変更された場合に即座にアップロードする。
[gist id=7837886]
（サーバー側は省略）
これだけでajaxを使ってファイルのアップロードが出来る。
contentTypeとprocessData
contentTypeとprocessDataはかならずfalseにすること。
contentTypeはサーバにデータを送信する際に用いるcontent-typeヘッダの値だが、ajaxのリクエストがFormDataの場合には適切なcontentTypeになるため、こちらで指定する必要はないので必ずfalseにすること。
また、processDataも同じくfalseにします。これは、dataに指定したオブジェクトをクエリ文字列に変換するかどうかを設定する箇所で、ファイルを送信する場合には必要ないのでfalseに設定する。
FormDataが使えなかった時はかなりかなり手間がかかっていましたが、FormDataが使えることで簡単に書けるようになりましたよと。
