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"
        });
    });
});

動作原理