ドラッグ アンド ドロップを使用して入力ファイルの値を自動的に入力するにはどうすればよいですか?

ページ上でのドラッグ アンド ドロップ時に入力ファイルの値を自動的に入力する方法

背景:

セキュリティ上の理由から、以前は JavaScript を使用して入力ファイルの値をプログラムで設定することはできませんでした。しかし、ブラウザ テクノロジーの進歩により、これは変わりました。

解決策:

ステップ 1: ファイル ドロップを有効にする

イベント リスナーを目的の場所にドラッグ アンド ドロップして追加します。コンテナ:

const target = document.getElementById("container");

target.addEventListener("dragover", (e) => {
  e.preventDefault();
  target.classList.add("dragging");
});

target.addEventListener("dragleave", () => {
  target.classList.remove("dragging");
});

ステップ 2: ファイル値の割り当て

dataTransfer イベントから FileList オブジェクトをキャプチャします:

target.addEventListener("drop", (e) => {
  e.preventDefault();
  target.classList.remove("dragging");

  const files = e.dataTransfer.files;
  document.getElementById("file-input").files = files;
});

Replace "container " にはドラッグ アンド ドロップを有効にするコンテナ要素の ID を指定し、"file-input" には次の ID を指定します。入力ファイル要素。

注:

このメソッドは、この仕様をサポートする最新のブラウザで動作します。

以上がドラッグ アンド ドロップを使用して入力ファイルの値を自動的に入力するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。