javascript 画像プレビュー機能の実装

Every Qiita #3
のんびり独学初学者の毎日投稿チャレンジ 3日目
今回は・・・
自作コミュニティアプリ開発で画像のプレビュー表示を実装した時の備忘録です。

実装の概要

1. 画像が選択された際にイベントの発火
2. ファイルデータを取得しsrc属性urlを生成
3. imgタグを生成し任意の場所に表示

上記の流れで実装していこうと思います！

ソースコード

img.js

 const question_img = document.getElementById('file_upload');
 question_img.addEventListener("change", function(){
   // question_img要素のデータを取得
   const reader = this.files[0];
   const img_url = window.URL.createObjectURL(reader);
   console.log(img_url);
   // エレメントを生成しimg_view要素に挿入
   const img_view = document.getElementById('img_view');
   const img_element = document.createElement('img');
   img_element.src = img_url;
   img_view.appendChild(img_element);
   console.log(img_element);
   console.log(img_view);
 });

index.html

<input type="file" accept="image/*" name="upload_img" class="ml-4" id="file_upload" multiple="multiple">
<!-- 画像をimg要素で出力 -->
<div class="img_view" id="img_view"></div>

ソースコード解説

1. input要素に指定したid("upload_img")でchangeイベントで発火
2. this.files[0]でオブジェクトのインデックス番号0の画像データを取得
3. window.URL.createObjectURL(reader)でローカル環境でのみ有効な画像urlを生成
4. createElement関数でimgタグを生成
5. srcに生成したurlを付与
6. 任意のエレメントに生成したimgタグを追加

※srcに指定したurlは保存しても取得した際画像を表示できないので、あくまで画像プレビュー機能として有効です。
※画像を複数選択した場合はforでループ処理してあげればokです！