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

img-upload-thumbnailテクノロジー

<input type=”file”>で画像アップロードする際、特に複数ある場合にファイル名だけでは、正直何をアップロードしようとしているのか確認できません。
そこで、JavaScriptWeb APIFileReaderオブジェクトを使用して、画像を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プラグイン です。
  • CSS で画像の大きさを制限すれば、サムネイル表示になります。
  • アップロードされた画像の差し替え、画像のファイル選択ボタンにも対応しています。
  • HTML5 の File API という機能で表示させます。(近年のブラウザで対応)
  • HTMLページが HTML5 形式でなくても(例えば XHTML 1.0 でも)、ブラウザが HTML5 に対応していれば使えると思います。

jQueryBase64ライブラリはこちら。

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

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

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

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

東京生まれ福岡育ちの文系プログラマー。
テクノロジーの恩恵を感じながら日々精進しています。
広く浅くをモットーに、最近ではプログラミングだけでなく、仮想サーバーからセキュリティ、監視システムなども勉強中です。

管理者をフォローする

コメント

タイトルとURLをコピーしました