1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【JavaScript】プレビュー機能の実装

Posted at

【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);
  });
});

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?