【JavaScript】プレビュー機能の実装
特徴
・画像を選択するとプレビュー画像が表示される
・画像は何度も選び直すことができプレビュー画像もその度変わる
手順
■HTML側の編集
❶画像投稿ページのHTMLにプレビュー画像を表示するスペースを作成
<div id="previews"></div>
■JavaScript側の編集
❷preview.jsを作成して読み込むよう設定
app/javascriptの中にpreview.jsを作成
app/javascript/packs/application.js
require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")
require('../preview') // 追記する
❸preview.jsの編集
①画像投稿ページのフォームを取得
②今記述したプレビュー画像を表示するスペースのHTML要素を取得
③条件分岐で、画像投稿ページのフォームでないなら処理を終了するように設定
④選択した画像情報に取得
- input要素(画像が入るところ)の値に変更があった場合、関数を発火させる
- 値の変更があった要素から、画像の情報を取得する
- 取得した画像情報のURLを生成する
⑤取得した画像情報をブラウザへ表示するために、HTML要素をJavaScript側で生成
⑥setAttributeメソッドを用いて生成したimg要素のsrc属性へ変数blobを設定
⑦作成したHTMLの要素をブラウザに表示
⑧画像を選択し直したら古いプレビューは削除されるようにする
app/javascript/preview.js
document.addEventListener('DOMContentLoaded', function(){
// ①画像投稿ページのフォームを取得
const postForm = document.getElementById('new_post');
// ②プレビューを表示するためのスペースを取得
const previewList = document.getElementById('previews');
// ③画像投稿ページのフォームがないならここで終了。「!」は論理否定演算子。
if (!postForm) return null;
// ④input要素を取得
const fileField = document.querySelector('input[type="file"][name="post[image]"]');
// input要素で値の変化が起きた際に呼び出される関数
fileField.addEventListener('change', function(e){
// ⑧古いプレビューが存在する場合は削除
const alreadyPreview = document.querySelector('.preview');
if (alreadyPreview) {
alreadyPreview.remove();
};
//
const file = e.target.files[0];
const blob = window.URL.createObjectURL(file);
// ⑤画像を表示するためのdiv要素を生成
const previewWrapper = document.createElement('div');
previewWrapper.setAttribute('class', 'preview');
// 表示する画像を生成
const previewImage = document.createElement('img');
previewImage.setAttribute('class', 'preview-image');
// ⑥setAttributeメソッドを用いて生成したimg要素のsrc属性へ変数blobを設定
previewImage.setAttribute('src', blob);
// ⑦生成したHTMLの要素をブラウザに表示させる
previewWrapper.appendChild(previewImage);
previewList.appendChild(previewWrapper);
});
});