JavaScript

画像ファイル選択時にAjaxで複数画像をアップロードする

form 内でテキストボックスやセレクトボックスなどの項目と一緒に、画像ファイルをアップロードするケースは少なくないと思います。

ただ、テキストデータに画像の情報を反映させた状態で、サーバへデータを送りたい場合もあります。

例えば、ブログ記事などの画像入りの文章などです。

今回は複数枚の画像を同時にアップロードする方法を紹介します。

数が決まっていない場合は画像を別途アップロードする

画像の数が固定であれば input タグの type=”file” の項目を数分だけ用意すれば事足ります。

しかし今回のようなケースの場合、文章データをサーバへ送る(POST)する前に別途画像だけサーバへアップロードすることになります。

アップロード時に決定された画像 URL を文章内に img タグなどで反映して、文章を完成させた状態で最終的に更新するパターンです。

どのような手法を使うか

一番シンプルな方法は、ファイルが選択された瞬間にアップロードを実行するパターンです。

モダンブラウザやレガシーブラウザなど環境に左右される部分はありますが、複数ファイルの場合は multiple 指定で実現できます。

ファイルの情報だけを参照する場合は、input タグの type 属性(file)の change イベントをトリガーとすることが可能ですが、サーバへバイナリデータを送る場合はフォームから送信する必要があります。

下記のサンプルソースコードは jQuery を使ったものですが、HTML5 からは JavaScript で FormData オブジェクトが利用できるのでこれを使っています。まずは html から。

JS は下記になります。

processData と contentType は false にしてあげる必要があります。

サーバに送られてきているかの確認

サーバ側でファイルが送られてきているか確認してみます。

ここでは PHP で $_FILES の内容を標準出力してみます。

あとは、画像ファイルをチェックしてサーバ上に保存するなり、AWS の S3 など CDN にアップロードしてしまえば、ブラウザ側ですぐに画像 URL が利用可能となります。
(その際は Ajax のレスポンスでその情報を返してあげて下さい)

要件次第では応用パターンを試す

今回はシンプルに書いてみましたが、要件や実現したいことによって調整すれば似たようなことはできると思います。

jQuery のプラグインを使うと、アップロードの状況をプログレスバーで表示できたりするので、複雑な部分はプラグインに頼るのもいいと思います。