jQueryでinput[type=”file”]で画像アップロード時にプレビューを表示する

input[type=”file”]で画像アップロードするときに、jQueryで選択された画像をプレビューで表示するやり方です。画像選択画面で「キャンセル」を押された場合にも、添付されているか確認してプレビューのオンオフ処理する方法。
また、ファイル選択必須・ファイルサイズのバリデーションも紹介します。

画像を送信するフォームをHTMLでつくる
画像を選択されたらプレビュー表示
キャンセルボタンが押されたらプレビューを削除
同一ページ内で複数のプレビューを利用する
ファイルサイズのバリデーション
選択必須なファイルサイズのバリデーション

jQuery関連記事

画像を送信するフォームをHTMLでつくる

HTML

<form method="post" action="" enctype="multipart/form-data">
  <input type="file" name="edit_image" id="edit_image" class="img_upload">
  <img src="" id="tl_img" class="img_preview">
  <input type="submit" value="投稿する">
</form>

フォームから画像などのファイルを扱う場合は、enctype="multipart/form-data"が必要なので付けます。
id="tl_img"のimgタグがプレビューする要素です。

画像を選択されたらプレビュー表示

JavaScript

$('#edit_image').on('change', function (e) {
  var reader = new FileReader();
  reader.onload = function (e) {
    $("#tl_img").attr('src', e.target.result);
  }
  reader.readAsDataURL(e.target.files[0]);
});

これだけで、#edit_imageのinput type=”file”が変更されたらimgタグにプレビューを作成できます。

キャンセルボタンが押されたらプレビューを削除

JavaScript

$('#edit_image').on('change', function (e) {
  var fileset = $(this).val();
  if (fileset === '') {
    $("#tl_img").attr('src', "");
  } else {
    var reader = new FileReader();
    reader.onload = function (e) {
      $("#tl_img").attr('src', e.target.result);
    }
    reader.readAsDataURL(e.target.files[0]);
  }
});

前のパターンでは、キャンセルボタンが押されたときに、添付ファイルがないため、エラーが出てしまうので、
その対策をしたものです。
#edit_imageのvalueを調べることで、ファイル名が取得できた場合はプレビューを作成します。
空白だった場合は、処理をせずにimgタグのプレビューを削除します。

同一ページ内で複数のプレビューを利用する

JavaScript

$('.img_upload').on('change', function (e) {
  var fileset = $(this).val();
  var place = $(this).next("img.img_preview");

  if (fileset === '') {
    place.attr('src', "");
  } else {
    var reader = new FileReader();
    reader.onload = function (e) {
      place.attr('src', e.target.result);
    }
    reader.readAsDataURL(e.target.files[0]);
  }
});

同一ページ内で、複数プレビュー機能を使いたい時ってありますよね？
そのたびにJavaScriptでid指定なんかしてらんないので、input type=”file”が複数あっても問題ないように変更したものを紹介します。
変数を$(this)で指定することで、その次のimgタグにプレビューを表示することができます。
HTML構造が変わらない場合だけになってしまいますが、十分使えると思います。

ファイルサイズのバリデーション

JavaScript

function file_size_check(idname) {
  var fileset = $('#' + idname).prop('files')[0];
  if (fileset) {
    if (fileset.size >= 10485760) {
      var label = $('#' + idname).data('label');
      $('#errorbox').append(label + "の添付ファイルが10MBを超えています。<br>");
    }
  }
}

確認ボタンを押した時に処理するバリデーションです。

選択必須なファイルサイズのバリデーション

JavaScript

function file_check(idname, category, preview) {
  var fileset = $('#' + idname).prop('files')[0];
  if (!fileset) {
    $('#errorbox').append(category + "を選択してください。<br>");
  } else {
    if (fileset.size >= 10485760) {
      $('#errorbox').append("添付ファイルが10MBを超えています。<br>");
    }
  }
}

確認ボタンを押した時に処理するバリデーションです。
選択されているかを確認し、次にファイルサイズを確認しています