<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プラグイン です。
- CSS で画像の大きさを制限すれば、サムネイル表示になります。
- アップロードされた画像の差し替え、画像のファイル選択ボタンにも対応しています。
- HTML5 の File API という機能で表示させます。（近年のブラウザで対応）
- HTMLページが HTML5 形式でなくても（例えば XHTML 1.0 でも）、ブラウザが HTML5 に対応していれば使えると思います。
jQueryのBase64ライブラリはこちら。
CDNも用意されていますよ。
CodePenにもサンプルがありますので、参考にどうぞ。
また、こちらはドラッグ＆ドロップとリサイズにも対応しているDropzone.jsを使ったサンプルです。
アニメーションも付いていて、正直こっちの方がカッコイイです。
以上、色々試してみてください。
- Original:https://minory.org/img-upload-thumbnail.html
- Source:Minory
- Author:管理者
Amazonベストセラー
Now loading...