JavaScriptで画像アップロード時にサムネイルを表示させる方法

2018年7月1日2022年9月8日

URLをコピーしました！

<input type=”file”>で画像をアップロードする際、特に複数ある場合にサムネイルがないと、正直何をアップロードしようとしているのか確認できません。
そこで、JavaScriptとWeb APIのFileReaderオブジェクトを使用して、画像をBase64エンコードしてサムネイルを表示する方法をご紹介します。

ファイル選択時にサムネイルを表示

やり方としては、ファイルを選択した際に発火するJavaScriptのonChangeイベントの時に、FileReaderを使ってBase64エンコードし、用意していたサムネイル用のイメージタグに差し込みます。

HTMLで画像選択フォーム作成

#file-imageがファイル選択で、#print_imgが表示用のイメージタグです。

<div class="panel panel-default">
    <div class="panel-heading">画像</div>
    <div class="panel-body">
        <img src="#" alt="" class="img-print" id="print_img" style="width:100%;">
    </div>
    <div class="panel-footer">
        <input type="file" id="file-image" accept="image/*">
    </div>
</div>

JavaScriptでサムネイル表示

以下はピュアなJavaScriptで書いていますが、後程jQueryのプラグイン等も紹介します。
表示前にAPIが対応しているか確認を入れてます。

window.onload = function() {
  (function() {
    var print_img_id = 'print_img';
    if (checkFileApi()) {
      var file_image = document.getElementById('file-image');
      file_image.addEventListener('change', selectReadfile, false);
    }
    function checkFileApi() {
      if (window.File && window.FileReader && window.FileList && window.Blob) {
        return true;
      }
      alert('このブラウザはFile APIに対応していないため利用できません');
      return false;
    }
    function selectReadfile(e) {
      var file = e.target.files;
      var reader = new FileReader();
      reader.readAsDataURL(file[0]);
      reader.onload = function() {
        readImage(reader, print_img_id);
      }
    }
    function readImage(reader, print_image_id) {
      var result_DataURL = reader.result;
      var img = document.getElementById(print_image_id);
      var src = document.createAttribute('src');
      src.value = result_DataURL;
      img.setAttributeNode(src);
    }
  })();
}

便利なjQueryライブラリも！

ファイル選択時にサムネイルを表示してくれるシンプルなjQueryのプラグインを見つけました。
プラグインの概要は以下の通りです。

Webページから <input type=”file”> を使って画像を選択したときに、その画像のプレビューをその場に表示させて画像の確認ができるjQueryプラグインです。
CSS で画像の大きさを制限すれば、サムネイル表示になります。
アップロードされた画像の差し替え、画像のファイル選択ボタンにも対応しています。
HTML5 の File API という機能で表示させます。（近年のブラウザで対応）
HTMLページが HTML5 形式でなくても（例えば XHTML 1.0 でも）、ブラウザが HTML5 に対応していれば使えると思います。