ホームページ > ウェブフロントエンド > jsチュートリアル > ドラッグ アンド ドロップ後にファイル入力値をプログラムで設定するにはどうすればよいですか?

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

DDD
リリース: 2024-12-03 13:03:12
オリジナル
436 人が閲覧しました

How to Programmatically Set File Input Values After Drag-and-Drop?

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

背景

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

解決策: 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><p>target.addEventListener('drop', (e) => {<br> e.preventDefault();<br> fileInput.files = e.dataTransfer.files;<br>});


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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート