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 サイトの他の関連記事を参照してください。