ドラッグ アンド ドロップでファイル入力値をプログラム的に設定するにはどうすればよいですか?

ページにファイルをドロップするときにファイル入力値を設定するには?

ユーザーが手動で選択および選択できるコントロールを作成しようとしています。ファイルをドロップしてフォームを送信しようとすると、問題が発生しました。ファイルがドロップされると、ファイル入力が空のままになります。以前は、セキュリティ上の懸念により、プログラムによるファイル入力値の設定は許可されていませんでしたが、最新のブラウザではこれらの脆弱性に対処しました。

解決策: DataTransfer または FileList を利用する

ファイル入力値を設定できるようになりました。最新のブラウザでは、dataTransfer オブジェクトまたは FileList オブジェクトを利用します。 2017 年 12 月以降、Firefox およびその他の主要なブラウザーでは、プログラムによるファイル入力操作が可能になりました。

メソッド:

1. ファイルを有効にするために、dragover イベントおよび dragleave イベントでのデフォルトのイベント動作を防止します。入力インタラクション。

2. オンザドロップイベント:

   • fileInput.files を、e.dataTransfer.files から取得したドロップされたファイルと同じに設定します。これにより、ページにドロップされたファイルがファイル入力に割り当てられます。
3. ユーザーがドラッグしていることを示す視覚的なキューを削除します。

例:

let target = document.documentElement;
let body = document.body;
let fileInput = document.querySelector('input');

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

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

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

  fileInput.files = e.dataTransfer.files;
});

注:この方法は最新のブラウザで動作し、ドラッグ アンド ドロップ機能を使用してファイル入力を処理する安全な方法を提供します。

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