フォームからファイルを選択した際に、submitする前にプレビュー表示する方法(jQuery版)

はじめに

フォームの入力の際に、入力に間違いがないかプレビュー表示する
この機能を実現するためにFileAPIを利用する
JavaScriptのFileAPIは2016年3月現在ほぼすべてのブラウザに対応している(IEさえも)

本サンプルコードはjQueryで動作します。
jQueryを使っていないのが知りたい人はこちらのフォームからファイルを選択した際に、submitする前にプレビュー表示する方法(jQuery"無し"版) を参照のこと

Demo

動作を確認できるデモはこちら
Demo

対象のコード

<form>
    <input type="file">
</form>

<div class="preview" />

$(function(){
  //画像ファイルプレビュー表示のイベント追加 fileを選択時に発火するイベントを登録
  $('form').on('change', 'input[type="file"]', function(e) {
    var file = e.target.files[0],
        reader = new FileReader(),
        $preview = $(".preview");
        t = this;

    // 画像ファイル以外の場合は何もしない
    if(file.type.indexOf("image") < 0){
      return false;
    }

    // ファイル読み込みが完了した際のイベント登録
    reader.onload = (function(file) {
      return function(e) {
        //既存のプレビューを削除
        $preview.empty();
        // .prevewの領域の中にロードした画像を表示するimageタグを追加
        $preview.append($('<img>').attr({
                  src: e.target.result,
                  width: "150px",
                  class: "preview",
                  title: file.name
              }));
      };
    })(file);

    reader.readAsDataURL(file);
  });
});