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

7月 01, 2018

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

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

やり方としては、ファイルを選択した際に発火する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のプラグインを見つけました。

Webページから <input type="file" /> を使って画像を選択したときに、その画像のプレビューをその場に表示させて画像の確認ができるjQueryプラグインです。アップロードされた画像の差し替え、ファイル選択ボタンを画像にする方法についても説明し...
jQuery Upload Thumbs - 画像アップロード前にプレビューを表示させる jQueryプラ... - www.dekasu.net

概要は以下の通りです。

Webページから <input type=”file”> を使って画像を選択したときに、その画像のプレビューをその場に表示させて画像の確認ができる jQueryプラグインです。

CSS で画像の大きさを制限すれば、サムネイル表示になります。

アップロードされた画像の差し替え、画像のファイル選択ボタンにも対応しています。

HTML5 の File API という機能で表示させます。（近年のブラウザで対応）

HTMLページが HTML5 形式でなくても（例えば XHTML 1.0 でも）、ブラウザが HTML5 に対応していれば使えると思います。

jQueryのBase64ライブラリはこちら。

jQuery Base64 | jQuery Plugin Registry - plugins.jquery.com

CDNも用意されていますよ。

Base64 - Base64 encoding and decoding - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!
Base64 - cdnjs.com - The best FOSS CDN for web related libraries to speed up ... - CDNJS.com

CodePenにもサンプルがありますので、参考にどうぞ。

また、こちらはドラッグ＆ドロップとリサイズにも対応しているDropzone.jsを使ったサンプルです。
アニメーションも付いていて、正直こっちの方がカッコイイです。

- www.dropzonejs.com

以上、色々試してみてください。

このブログを検索

Minory