JavaScriptを使用してプロジェクトにドラッグ＆ドロップイメージを

あなたのプロジェクトにイメージをドラッグ＆ドロップする方法を学ぶ複雑なタスクのように見えることができます.実際には、あなたが前にそれをやったことがない場合、それはあなたがそれを迅速かつ容易に行う方法を示してそこに多くのチュートリアルがないことを助けることはできません.このチュートリアルでは、バニラJavaScriptを使用して相対的に容易に行う方法を教えます.

始める前に、ドラッグ＆ドロップ機能を実装することは次の入力フィールドを必要としないことに注意することが重要です.

<input type = "file" >

ユーザーがボタンをクリックして画像をアップロードしたい場合にのみ必要です.開発者はしばしばボタンとドラッグ＆ドロップの両方のオプションを使用してユーザーが画像や他のマルチメディアをアップロードできるようにします.しかし、このチュートリアルでは、物事を迅速かつ簡単に保つためにドラッグ＆ドロップ機能を実装するだけです.
さて、入力フィールドを必要としないことを理解しましたので、ドラッグ＆ドロップ機能のためのHTMLマークアップを作成してみましょう.

<p>Drag and drop an image into the box</p>
<div id="image_drop_area"></div>
<p id="file_name"></p>

ImageSound DropCount領域のIDを持つdiv要素は、画像をドラッグ＆ドロップし、p要素にFileHenNameのIDを付けて、画像ファイルの名前を表示する場所です.
CSSファイルに移動しましょう.

body{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   min-height: 100vh;
   overflow: hidden;
}
#image_drop_area{
   width: 300px;
   height: 169px;
   border: 1px solid black;
   background-position: center;
   background-size: cover;
   box-sizing: border-box;
}

body要素では、画面の中央にコンテンツを配置するflexboxプロパティを使用しました.また、私たちは後でそれを通過するでしょう画像を正しく表示することができますので、ImageCount DropRoundエリアdivを設定します.あなたの好みに合わせてこのディフの幅と高さを変更してください.
JavaScriptファイルでは、ImageSound DropCountエリア部へのアクセスを開始しましょう.

const image_drop_area = document.querySelector("#image_drop_area");

また、すぐにアップロードされた画像のデータを格納するグローバル変数を作成します.後でこの変数を初期化します.

var uploaded_image;

イメージドロップ領域にアクセスできるようになったので、ドラッグした画像を処理する「ドラッグオーバー」イベントリスナーを追加しましょう.

image_drop_area.addEventListener('dragover', (event) => {
   event.stopPropagation();
   event.preventDefault();
   event.dataTransfer.dropEffect = 'copy';
});

DragOverイベントは、ジョブを完了するのに十分ではありません.また、'ドロップ'イベントリスナーが必要です.

image_drop_area.addEventListener('drop', (event) => {
   event.stopPropagation();
   event.preventDefault();
   const fileList = event.dataTransfer.files;

   document.querySelector("#file_name").textContent =    fileList[0].name;
  readImage(fileList[0]);
});

ドロップイベントリスナーをすばやく確認しましょう.ファイルが削除されると、変数filelistはすべてのイメージデータを格納します.この変数を使用して、私たちのファイル名のテキストコンテンツをHTMLファイルに戻します.最後の行のReadimage ( filelist [ 0 ])への呼び出しを通知します.この関数にイメージデータを渡してデータURIに変換します.
どのようなデータURIですか?基本的には、最初にデータURIに変換することなく画像を使用することはできません.たとえば、画面上に表示できないか、データベースに保存することはできません.以下は画像データをデータURIに変換するReadimage機能です.

readImage = (file) => {
   const reader = new FileReader();
   reader.addEventListener('load', (event) => {
    uploaded_image = event.target.result;     
 document.querySelector("#image_drop_area").style.backgroundImage     = `url(${uploaded_image})`;
   });
   reader.readAsDataURL(file);
}

イメージは現在、データURIに変換され、我々が以前に作成したグローバルなUploadedHandイメージ変数に保存されます.この変数を使用して、ImageSound DropCount領域の背景画像を設定しました.この変数はグローバル変数ですので、どこにでもアクセスできます.これは、データベースに格納したり他の何かを行う別の関数を作成するオプションを持っていることを意味します.
それは仕事を得ることができますか?私のcodepenをチェックしてください
.