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

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

URLをコピーしました！

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

ファイル選択時にサムネイルを表示
1. HTMLで画像選択フォーム作成
2. JavaScriptでサムネイル表示
便利なjQueryライブラリも！
画像のドラッグ＆ドロップ対応も！

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

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

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

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

</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 に対応していれば使えると思います。