JavaScript で FormData の FileList の長さをプログラムで設定および更新する方法

FormData オブジェクトの FileList でのファイル オブジェクトと長さの設定

問題ステートメント:

内に File オブジェクトを設定するにはどうすればよいですかFileList オブジェクトを作成すると同時に、FileList の長さプロパティも更新し、変更が対応する FormData に反映されるようにします。オブジェクト?

解決策:

の .files プロパティを設定することができます。要素を FileList オブジェクトに追加しますが、.files.length プロパティは最初は 0 に設定されたままです。さらに、フォームが送信されると、File オブジェクトの size プロパティが 0 に設定される場合があります。

これらの問題に対処するには、DataTransfer コンストラクターを利用できます。 DataTransfer オブジェクトを使用すると、DataTransferItemList を通じてアクセスできる変更可能な FileList オブジェクトを作成できます。変更可能な FileList オブジェクトを作成したら、それに応じて File オブジェクトを設定し、長さプロパティを更新できます。

この手法を実装する方法は次のとおりです。

const input = document.createElement("input");
input.type = "file";
input.name = "files";
input.multiple = true;

const dT = new DataTransfer();
dT.items.add(new File(['foo'], 'programmatically_created.txt'));

input.files = dT.files;

このコード スニペットは、新しいファイルを作成します。 要素と DataTransfer オブジェクト。次に、ファイルを DataTransfer オブジェクトに追加し、入力要素の .files プロパティを DataTransfer オブジェクトの FileList オブジェクトに設定します。

ここで、入力要素の .files プロパティにアクセスすると、次のようになります。 DataTransfer オブジェクトを通じて設定された File オブジェクトにアクセスでき、FileList オブジェクトの .length プロパティが正しく設定されます。

さらに、フォームが送信されると、File オブジェクトの size プロパティが正しい値に設定されます。このアプローチにより、FileList オブジェクトに加えられた変更が、フォームとともに送信される FormData オブジェクトに確実に反映されます。

以上がJavaScript で FormData の FileList の長さをプログラムで設定および更新する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。