プレビュー機能の説明

preview_image.js

//略
$(function (){
  //type属性がfileのinputタグに変化があった（＝ファイルが選択された）ら発火
  $('input[type="file"]').on('change',function previewFile(e) {
    //変更があった要素の１個前のimg要素をpreviewとする
    var preview = $(this).prev('img')[0]
    //のちのち消します
    console.log($(this).prev('img')[0]);
    //この２行は定型の書き方で、Filereaderを使って選択されたファイルを取得
    var file    = e.target.files[0];
    var reader  = new FileReader();

    reader.onloadend = function () {
      //取得されたファイルの結果を、previewのsrc属性に指定
      preview.src = reader.result;
    }

    if (file) {
      reader.readAsDataURL(file);
    } else {
      preview.src = "";
    }
  });
});
//略