Skip to content

アップロードするファイルのプレビューを表示する

input[type=”file”] でファイルをアップロードするとき、デフォルトでは選択中のファイルの中身を確認することはできません。それをプレビューできるようにしていきましょう。

FileReader オブジェクト

ローカルにあるファイルのプレビューは、FileReader オブジェクトを利用して実装します。

FileReader は readAsDataURL() メソッドに File オブジェクトを渡すことでファイルの中身を取得することができます。readAsDataURL() メソッドによるファイルの読み込みが完了すると load イベントが発火し、そこで File の中身を取得できるようになります。

そのためまず FileReader をインスタンス化し、load イベントを登録、そのうえで FileReader の readAsDataURL() メソッドを使い、File の中身を取得しましょう。

サンプル

index.html

script.js

補足

紹介したサンプルには実装していませんが、ユーザーがファイルを選択するときに「何も選択しない」という操作をすることを考慮し、FileList の length が 0 の場合にはプレビューを削除するような処理も実装しておく必要があります。

またこのサンプルでは一か所にプレビューを表示していますが、実際は input 要素とプレビューを表示する要素を 1 対 1 に対応させたほうが実装しやすく、使い勝手も良くなることが多いです。input 要素とプレビュー表示を label 要素で囲んでしまうのがオススメです。

Comments are closed.