画像ファイル選択時に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 のプラグインを使うと、アップロードの状況をプログレスバーで表示できたりするので、複雑な部分はプラグインに頼るのもいいと思います。

参考カテゴリ

オススメ記事

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

標準出力と標準エラー出力をパイプに渡す

よく、標準出力先をファイルにリダイレクトすることはありますが、意外に標準エラー出力は使う機会がありません。しかし、やはりツールやパッケージ製品になると標準エラー出力も活用されているようです。でも、...

Linux(FreeBSD)

>>記事を確認する

主要無料ブログ5つに対する自動投稿PHPプログラム

アメブロへ楽天APIなどの情報を自動で投稿する の反響が良かったので、どうせならアメブロ以外の無料ブログの XML-RPC を使った自動投稿も紹介したいと思います。これには FC2BlogManager.php というライブ...

PHP

>>記事を確認する

snmpでデバイスの情報を取得

snmpでデバイスの情報を取得するコマンドです。これを元に、ディスクIOなどのMIB値を探します。 $ snmpwalk -v 2c -c {SNMPGROUPNAME} localhost 1.3.6.1.4.1.2021.13.15.1.1.2 (結果の一部) UCD-DIS...

Linux(FreeBSD)

>>記事を確認する

awkで指定したカラム以降をprint表示する

前回、awk で最後のカラム以外を表示してみましたが、今回は指定したカラム以降のカラムを全部表示したいと思います。 例えば、7 個の文字列がカンマで区切られているファイルがあるとしたら、3 番目のカラム...

awk / シェル

>>記事を確認する

CentOSでRedisサーバを使う

冗長化した Web サーバなどで、セッションの管理や、セッションや特定のユーザーに紐付く一時データを管理するのに memcache を使う場面は多いと思います。 その memcache の中でも主流なのが memcached です...

Linux(FreeBSD) / CentOS / Redis

>>記事を確認する

ドメイン取るなら低価格で楽々管理

バリュードメインは、GMO デジロック社の低価格ドメイン総合サービスです。

このサイト含め、私もこれまでに 100 個以上のドメインを取得して管理してきましたが、WHOIS の代理公開も可能なので、無料 SSL 証明書の Let's Encrypt と組み合わせれば、かなりの低価格で SSL サイトも運営できます。

年単位で領収証発行もしてくれるので、たくさんサイトを抱えているアフィリエイターや個人事業主にもオススメです。

AWSの無料利用枠内で複数サイトをサクサクと運営する方法

MySQLでテーブル定義を取得

似たような構成のテーブルを作る時に、今までは mysqldump コマンドで -d オプションを付けて実行していました。 これでも十分に要件は満たせるのですが、MySQL のコンソールからサクっと出したい場合もある...

データベース / MySQL

>>記事を確認する

Poderosa5の登場と文字色と背景色

新しい PC を購入したので、久し振りに Poderosa のインストールをしたのですが、Poderosa-Terminal として最新バージョンの 5 が 2016 年に登場していました。 これ、職場でもインストールしてみたのですが...

Windows / ツール

>>記事を確認する

Laravel5.1からLaravel5.5へアップデートする

LTS だった Laravel5.1 のバグフィックスサポートが 2017 年の 6 月で終わり、セキュリティサポートも 2018 年の 6 月で終了となります。 このタイミングで、兼ねてから発表のあった、次期 LTS の Laravel5.5...

PHP / PHPフレームワーク / Laravel

>>記事を確認する

VagrantでCentOS6.9のイメージを使う

CentOS7 が既に 7.3 まで出ていますが、AmazonLinux がまだ 6 の構成と似ていることから、なかなか 7 系に移行できません。 そこで、Vagrant のイメージも 6 系の最新版を使うと思ったのですが、下記の BOX ...

Linux(FreeBSD) / CentOS / Vagrant

>>記事を確認する