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

ページ ドロップでのファイル入力値の設定

背景

ファイルの選択と送信を可能にするコントロールを開発中です指定されたエリアにドロップすることによって。ただし、フォームが手動で送信されるまで、ファイル入力は空のままであることがわかります。

解決策: JavaScript からファイル オブジェクトを設定する

ありがたいことに、最近のブラウザではプログラムによる設定が可能になりました。 files プロパティを使用して入力ファイルを取得します。データ転送を使用して実装する方法は次のとおりです。

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

target.addEventListener('drop', (e) => {
  e.preventDefault();
  fileInput.files = e.dataTransfer.files;
});

代替方法: FileList

FileList からファイル入力値を設定することもできます。 object:

let fileInput = document.querySelector('input');

fileInput.files = [file1, file2, ...];

免責事項

入力ファイルの値を設定できるかどうかは、データ転送または使用可能な FileList オブジェクトによって異なります。この機能に関連する従来のセキュリティ リスクは、最新のブラウザで対処されています。

例

デモは、以下の提供されたコード スニペットにあります。

let fileInput = document.querySelector('input');<p>target.addEventListener('drop', (e) => {<br> e.preventDefault();<br> fileInput.files = e.dataTransfer.files;<br>});</p>

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