概要
FileReader APIを使用して、<input type="file">で複数選択した画像ファイルをサムネイル表示する処理をJavaScriptで実装。
用途・要件
- <input type="file">で複数選択した画像ファイルをサムネイル表示する。
- <input type="file">に
accept="image/*"
を指定して画像ファイルのみ選択可能にしている。 - サムネイル表示するプレビューエリアは、ファイル選択後に表示。
- JavaScriptのFileReader APIを使用。
検証ブラウザ
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
- Microsoft Edge(最新)
実装
ローカル環境にコードを移設した際に動作しない場合はこちら。(トラブルシューティングページへ)