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

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

従来のファイル選択とドラッグの両方を可能にするファイル入力コントロールを作成する場合-and-drop では、ドロップされたファイルがファイル入力フィールドに正しく反映されていることを確認することが重要です。ただし、JavaScript によるファイル入力値の設定は、セキュリティ上の懸念により、これまで制限されてきました。

解決策

ありがたいことに、最新のブラウザはこれらのセキュリティの脆弱性に対処しており、 input[type="file"] の files プロパティをプログラムで調整します。これにより、ファイル入力フィールドにファイルをドロップした場合の効果をシミュレートできます。

実装の詳細

1. ドラッグ アンド ドロップ イベントの処理: イベント リスナーを使用して、目的のターゲット要素 (例:ファイル入力フィールドを囲むコンテナ)。
2. デフォルトのアクションを防止: カスタム処理するためにデフォルトのドラッグ アンド ドロップ動作を防止します。
3. DataTransfer または FileList にアクセス: ドロップされたファイルの場合、イベントに渡された e オブジェクトから dataTransfer オブジェクトまたは FileList を取得します。 handler.
4. ファイル入力フィールドの設定: ターゲット ファイル入力フィールドのファイル プロパティを、手順 3 で取得した dataTransfer.files または FileList に割り当てます。このアクションにより、ファイル入力が効果的に設定されます。ドロップされたファイルが含まれるフィールド。

例コード

次に、ファイルがページにドロップされたときにファイル入力値を設定する方法を示す JavaScript コード スニペットを示します。

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

// Configure drag and drop event listeners
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 サイトの他の関連記事を参照してください。