🏞
JavaScriptで画像ファイル選択時にプレビューを表示する方法
この記事について
この記事では <input type="file"> 要素を使って選択された画像ファイルのプレビューをJavaScriptを使って表示する方法について紹介します。ソースコードについては この記事のGistページ からダウンロード可能であり、結果については デモ からご確認可能です。
おおまかな手順
おおまか手順を下記に示します。
- コーディング
- 動作確認
コーディング
ターミナルで下記のコマンドを実行してコーディングの準備をします。
mkdir javascript-image-preview
cd javascript-image-preview
touch index.html main.js
index.html
エディタでindex.htmlを開いて下記の内容を入力します。
main.js
エディタでmain.jsを開いて下記の内容を入力します。
ポイントを下記に示します。
- input要素のchangeイベントハンドラでは、選択されたファイルのオブジェクトURLを作成してimg要素のsrc属性に設定します。
ESCキーを押すなどしてファイルの選択をキャンセルすることもあるのでif文を使って選択されたファイルの件数をチェックしています。
動作確認
ブラウザでindex.htmlを開きます、macOSの場合はターミナルで下記のコマンドを実行すると便利です。
open index.html
画像ファイルの選択部をクリックして適当な画像ファイルを選択してプレビューが表示されることを確認します。
おわりに
WebサーバーでContent Security Policyを設定している場合はプレビューが表示されないことがあるのでご注意ください。特にChromeで開発していて本番環境でSafariやiPhoneからアクセスすると動かないことがあるので、その場合はimg-src、connect-src、media-srcなどに blob: を追加することをお試しください。また、この記事では扱いませんでしたが動画についても同様の手順でプレビューを表示することができます。画像や動画のプレビューを表示したいという要望は少なくないのでこの記事が実装方法を探している方のお役に立てば幸いです。最後までお読みいただきありがとうございました！
Discussion