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

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

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

form 内でテキストボックスやセレクトボックスなどの項目と一緒に、画像ファイルをアップロードするケースは少なくないと思います。ただ、テキストデータに画像の情報を反映させた状態で、サーバへデータを送りたい場合もあります。例えば、ブログ記事などの画像入りの文章などです。

この場合は、文章データをサーバへ送る(POST)する前に、別途画像だけサーバへアップロードすることになります。アップロード時に決定された画像 URL を文章内に img タグなどで反映して、文章を完成させた状態で最終的に更新するパターンです。

どのような手法を使うか

一番シンプルなのはファイルが選択された瞬間に、アップロードを実行するパターンです。モダンブラウザとレガシーブラウザなど、環境に左右される部分はありますが、複数ファイルの場合は multiple 指定で実現できます。ファイルの情報だけを参照する場合は、input タグの type 属性(file)の change イベントをトリガーに可能ですが、サーバへバイナリデータを送る場合はフォームから送信する必要があります。

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

<form id="form" method="post" enctype="multipart/form-data">
   <input id="image_file" name="image_file" type="file" accept="image/*" multiple="multiple" /><br />
   <input type="submit" name="submit" value="画像アップロード" />
</form>

JS は下記になります。

$('#image_file').on("change", function() {

    var $form = $('#form');
    var fdo = new FormData($form[0]);

    $.ajax( {
        url: '[サーバ側のURL]',
        type: 'post',
        processData: false,
        contentType: false,
        data: fdo,
        dataType: 'json',
        success: function(data) {
            alert(data.info);
            console.log(data);
        },
        error: function(xhr, status, error) {
            alert('ERROR : ' + status + ' : ' + error);
        }
    });
    return false;
});

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

問題なく送られてきているか確認

サーバ側でファイルが送られてきているか確認してみます。ここでは PHP で $_FILES の内容を標準出力してみます。

$info = var_export($_FILES, TRUE);

$result = array();
$result['code'] = 200;
$result['info'] = $info;
echo json_encode($result);

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

要件次第で応用する

今回はシンプルに書いてみましたが、要件や実現したいことによって調整すれば、似たようなことはできると思います。jQuery のプラグインを使うと、アップロードの状況をプログレスバーで表示できたりするので、複雑な部分はプラグインに頼るのもいいと思います。


参考カテゴリ

オススメ記事

最新の投稿やよく見られているのオススメ記事一覧です。

AmazonLinuxでEC2起動時にスワップ領域の割り当てに失敗

EC2 起動時のスワップ領域割り当てですが、これまでは以下の記事を参考に、/etc/rc.local を使って行っていました。 ・ Amazon EC2(Linux)のswap領域ベストプラクティス しかし、最近になって、EC2 イン...

>>記事を確認する

【5分でできる】Laravel5.4から5.5へバージョンアップ

Laravel5.5 がついにリリースされたので、5.4 ベースで作っていたものをバージョンアップしてみました。 composer.json の以下の部分を 5.5.* に変更するだけですが、依存関係のパッケージも問題なくアップデ...

>>記事を確認する

【30分でできる】AWSのEC2にgoofysを入れてS3をマウント

過去に携わったプロジェクトで、S3FS の通信状態が悪い時があるので、アプリ側のプログラムを AWS SDK を使ったものに置き換えていこうという施策がありました。 S3FS の導入には関わっていなかったので、導...

>>記事を確認する

【30分でできる】ぐるなびAPIで飲食店の店舗情報取得

過去に作成した「ぐるなびAPI」のプログラムや、ぐるなびの Web Service が新しくなったこともあり、API からの情報取得プログラムを書き換えてみました。 以前の記事は下記になります。 ・ ぐるなびAPIで...

>>記事を確認する

NginxのFastCGIキャッシュで白い画面がキャッシュされる

以前から、トップページにアクセスすると、レスポンスステータスは 200 で返ってくるのに、画面に何も表示されない現象が稀に見受けられたので調査してみました。 さすがに機会損失にも繋がるということで、...

>>記事を確認する

Laravel5.4の認証ユーザーのパスワードハッシュについて

Laravel で用意されている認証モジュールを利用する際、ユーザーモデル(User.php)経由で登録されるパスワードのハッシュ方法について調べてみました。 Laravel 上ではパスワード文字列を bcrypt() のヘルパー...

>>記事を確認する

Laravel5.4のコントローラコンストラクタでAuth::user()が取得できない

Laravel5.4 で認証を通したアクセスに対して、コントローラのコンストラクタでユーザモデルの値を取得しようと思ったら、なぜか Auth::user() の値が取得できなくて悩みました。 public function __construc...

>>記事を確認する

NginxのHSTS(HTTP Strict-Transport-Security)の設定

「Let's Encrypt」のおかげで、全サイト SSL 化していますが、これまで nginx の設定では、http のアクセスがあった場合に https に 301 リダイレクトさせていました。 この場合、Googlebot に http のアク...

>>記事を確認する

GoogleMapのAPIキーの認証情報にリファラURL設定

昔は API キーを指定することで、JavaScript で GoogleMap が表示できていましたが、何年か前に、そのキーに対して認証情報の追加が推奨されました。 新規で発行する場合は必須になっているかもしれませんが...

>>記事を確認する

【30分でできる】AmazonLinuxでApache2.4+php7.1+Laravel5.5

先日、「 VagrantでCentOS6.9のイメージを使う 」の通り、CentOS6.9 には Apache2.4 と PHP7.1 で Laravel のフレームワークが使える環境を構築しました。 ただ、将来的には AWS かつ Amazon Linux 上で動か...

>>記事を確認する