JavaScriptを使った画像プレビューの実装

🔎ドラッグ&ドロップで画像を選択するやつの画像プレビューが欲しい！！！

実装前

• 複数の画像の選択が行える
• 選択画像が表示されず、どの画像を選んでいるか / 実際に選択出来ているかがわからない

実装後

• 選択した画像がドロップエリア外に表示される

完成イメージ

💻️コードかきかき

JS分からんマンだったのでふっけ師匠に9割教えてもらいました🥝

const fileInputRef = document.querySelector("#uploadFile");

で、inputタグ(画像選択)の中身を拾ってきます。 最初は何も画像が入っていない状態ですが、画像が追加されinputタグが変更されると、  

fileInputRef.addEventListener("change", (e) => {
  //for文
  for (let num = 0; num < e.target.files.length; num++) {
  const file = e.target.files.item(num);
 //ここからは後で触れるので一旦省略してね
  loadImage(
    file, // ロード前の画像を渡す
    (loadedImage) => { // callback ロードが終わった後に実行する関数を渡す
      document.getElementById('preview').innerHTML += '<img src>';
    }
  )
}

その画像にイベントを発火させ(e)、それをfor文で繰り返します。 (numがファイル数。e.target.files.length;で配列の長さを取得してインクリメントで加算)

loadedImageを呼び出すので一旦その下のコードを見てみましょう😼  

const loadImage = (file, callback) => {
  const reader = new FileReader();

  //  ロードします。時間かかります。
  reader.readAsDataURL(file);

  // ロード終わったときに実行される関数
  reader.onload = () => {
    // ロードが終わった後の画像
    const loadedImage = reader.result;
    callback(loadedImage);

ロードでは、画像を文字列に変換しています。よく見るやつね。 ロードが終わったら、その文字列変換した画像をloadedImageに代入して  

loadImage(
    file, // ロード前の画像を渡す
    (loadedImage) => { // callback ロードが終わった後に実行する関数を渡す
      document.getElementById('preview').innerHTML += '<img src>';
    }
  )

HTMLファイルに記述している"preview"というidがついたpタグの間にimgタグを挟むように命令します。。。  

📒まとめると？

JavaScript

/*画像プレビュー実装*/
const fileInputRef = document.querySelector("#uploadFile");
fileInputRef.addEventListener("change", (e) => {


  //for文
  for (let num = 0; num < e.target.files.length; num++) {
  const file = e.target.files.item(num);
  loadImage(
    file, // ロード前の画像を渡す
    (loadedImage) => { // callback ロードが終わった後に実行する関数を渡す
      document.getElementById('preview').innerHTML += '<img src>';
    }
  )
}

})

あとはcssで良い感じに整形してね～～

今回はこんな感じ！！！

#preview img {
width:80px;
height:80px;
object-fit: cover;
border:3px solid #278c72;
margin: 20px 5px 0 5px;
border-radius: 5px;
}