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

img-upload-thumbnail
  • URLをコピーしました!

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

目次

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

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

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

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

JavaScriptでサムネイル表示

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

便利なjQueryライブラリも!

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

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

また、イメージタグのsrc要素に、サムネイルとなる画像をエンコードして入れるためのjQueryBase64ライブラリはこちら。

あわせて読みたい
jQuery Base64 | The jQuery Plugin Registry Static archive of the old plugins.jquery.com site.

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

cdnjs
Base64 - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developer... Base64 encoding and decoding - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all ...

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

画像のドラッグ&ドロップ対応も!

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

あわせて読みたい

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次