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

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

HTML

HTML

CSS

CSS

JavaScript

JavaScript

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

実装前

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

実装後

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

完成イメージ

スクリーンショット 201.png

💻️コードかきかき

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

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

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

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

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

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

const loadImage = (file, callback) =&gt; { const reader = new FileReader(); // ロードします。時間かかります。 reader.readAsDataURL(file); // ロード終わったときに実行される関数 reader.onload = () =&gt; { // ロードが終わった後の画像 const loadedImage = reader.result; callback(loadedImage);

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

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

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

📒まとめると?

JavaScript

/*画像プレビュー実装*/ const fileInputRef = document.querySelector("#uploadFile"); fileInputRef.addEventListener("change", (e) =&gt; { //for文 for (let num = 0; num &lt; e.target.files.length; num++) { const file = e.target.files.item(num); loadImage( file, // ロード前の画像を渡す (loadedImage) =&gt; { // callback ロードが終わった後に実行する関数を渡す document.getElementById('preview').innerHTML += '&lt;img src&gt;'; } ) } })

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

今回はこんな感じ!!!

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

びきニキ

@BkNkbot