FileAPIで画像を選択したらプレビューを表示する

HTML5の実装はまだ発展途上ではありますが、
インターネット・エクスプローラもバージョン10になって
ようやくFileAPIでは、Firefox、Chromeと
肩を並べられるようになったようです。

ファイルの書き込み・作成となるとまだまだ実装している
ブラウザが少ないですが、読み込みについては
だいぶ対応されています。
あと数年もしたら、WindowsアプリもHTML5で遜色なく
作れるようになるのでしょうか。ちょっとそんな期待も
抱いてしまいました。

とりあえずプレビューについては、ローカル環境でも
使えるので、今後ともよく使うでしょう。
コードをまとめました。

$(document).on("change", "#inputFile", function() {

    var file = this.files;

    // 画像ファイル以外は処理を中止
    if (!file[0].type.match(/^image\/(png|jpeg|gif)$/)) return;

    var img    = new Image();          // 表示用のイメージオブジェクトを取得
    var reader = new FileReader();  // ファイルリーダー作成

    // 画像がロードされてから処理を行う
    reader.onload = function (e) {

        // readAsDataURLをsrcに指定してイメージを作成
        $("#fd_display").append("<img src='"+e.target.result+"' alt='canvas' />");

    }

    // readAsDataURLメソッドでファイルの内容を取得
    reader.readAsDataURL(file[0]);   

});

アップロード用のフォームタグ、　<input type=’file’ id=’inputFile’  />　をクリックして、
画像が選択されたあとの動作になります。