かってぃのブログ

喫茶店を遊牧しながら勉強したり開発したりする大学院生のブログです。

katty0324

jQuery Form Pluginを使えば、画面遷移なしにフォームの内容をサーバに送信できる?入力値の検証をサーバ側で随時行えたり、アップロード画像のプレビューを行えたり、色々使えそう。

on 2011-04-02 17:18:30

webから

jQuery Form Plugin

Ajaxが普及して、色々なデータが画面遷移なしにサーバに送れるようになりました。

これは非常に便利なのですが、ユーザーのローカルPCに入ってるファイルをアップロードするのには使えません。(画面遷移なしにデータを送られてしまったらセキュリティ上問題があるためと推測)

そこで登場するのが、jQuery Form PluginというjQueryプラグインで、これを使えばファイルアップロードも含めてフォームに入力された内容を随時サーバにAjaxで転送できます。

jQuery Form Plugin

http://jquery.malsup.com/form/

使い方

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

$('form').ajaxSubmit();

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

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

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

jQuery Form Pluginで、フォームのデータを随時サーバに転送して入力値の検証などが簡単にできます。(たとえば、新規登録フォームのユーザーIDが既に使用されていないかの確認など)

でも、これはプラグインなしのjQueryでも可能なので、ここでは画像アップロードをAjaxでやるというサンプルを示します。

フォームのHTMLは次のようなものを想定。inputタグの内容が変更された時に、imgタグの中に画像を表示します。フォームの送信先のupload.phpには、画像をアップロードしてそのURLを返すようなプログラムを作っておきます。

<form action="./upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="data">
    <input type="submit">
</form>
<img src="">

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

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

動作原理

画像をアップロードする前にプレビューをしたいということで、これを調べていた時に、次のようなページを見つけました。

PHPで画像アップロード時のプレビュー

http://blog.flup.jp/2007/07/07/php_image_realtime_preview/

この方は、隠しiframeを利用して実現されています。

jQuery Form Pluginでも、動作の様子を観察していると、処理中に一瞬iframeが表示されるので、おそらく似たような処理をしているのだと想像しています。(一瞬表示されると言ってもバックグラウンドで表示されているだけで、ユーザーには一切見えないところです)

by katty0324 on 2011-04-02 17:58:41

コメント(0)