jQuery Form Pluginでフォームのアップロード画像を事前にプレビューする

広告

jQuery Form Plugin

Ajaxが普及して、色々なデータが画面遷移なしにサーバに送れるようになりました。
これは非常に便利なのですが、ユーザーのローカルPCに入ってるファイルをアップロードするのには使えません。(画面遷移なしにデータを送られてしまったらセキュリティ上問題があるためと推測)
そこで登場するのが、jQuery Form PluginというjQueryプラグインで、これを使えばファイルアップロードも含めてフォームに入力された内容を随時サーバにAjaxで転送できます。
jQuery Form Plugin

使い方

ajaxSubmitという関数を使うだけ!

$('form').ajaxSubmit();

通信が完了したときにコールバック処理が行いたければ、パラメータを渡して実行します。

$('form').ajaxSubmit({
    success: function(data){
        alert('success!');
    },
    dataType: “json"
});

プレビュー機能付き画像アップローダ

jQuery Form Pluginで、フォームのデータを随時サーバに転送して入力値の検証などが簡単にできます。(たとえば、新規登録フォームのユーザーIDが既に使用されていないかの確認など)
でも、これはプラグインなしのjQueryでも可能なので、ここでは画像アップロードをAjaxでやるというサンプルを示します。
フォームのHTMLは次のようなものを想定。inputタグの内容が変更された時に、imgタグの中に画像を表示します。フォームの送信先のupload.phpには、画像をアップロードしてそのURLを返すようなプログラムを作っておきます。

Javascriptのコードは次のような具合に書きます。inputタグの内容が書き換えられたら、ajaxSubmitを実行。コールバック関数の中で画像のURLを取得して、imgタグに表示させます。

$(function(){
    $('input').change(function(){
        $('form').ajaxSubmit({
            success: function(data){
                $('img').attr('src', data);
            },
            dataType: “json"
        });
    });
});

動作原理

画像をアップロードする前にプレビューをしたいということで、これを調べていた時に、次のようなページを見つけました。
PHPで画像アップロード時のプレビュー
この方は、隠しiframeを利用して実現されています。
jQuery Form Pluginでも、動作の様子を観察していると、処理中に一瞬iframeが表示されるので、おそらく似たような処理をしているのだと想像しています。(一瞬表示されると言ってもバックグラウンドで表示されているだけで、ユーザーには一切見えないところです)

コメント

タイトルとURLをコピーしました