如何在 JavaScript 中以程式設計方式設定和更新 FormData 的 FileList 長度？

在FileList 中為FormData 物件設定檔案物件和長度

問題陳述：

我們如何在其中設定File物件FileList 對象，同時也更新FileList 的length 屬性並確保更改反映在對應的FormData中

解決方案：

可以設定 的.files 屬性元素加入FileList 對象，但.files.length 屬性最初仍設定為0。此外，提交表單時，File 物件的 size 屬性可能設定為 0。

解決這些問題，我們可以利用 DataTransfer 建構子。 DataTransfer 物件允許我們建立一個可以透過 DataTransferItemList 存取的可變 FileList 物件。一旦我們有了可變的 FileList 對象，我們就可以設定 File 物件並相應地更新 length 屬性。

以下是實現此技術的方法：

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 屬性將被正確設定。

此外，當提交表單後，檔案物件的大小屬性將設定為正確的值。這種方法確保對 FileList 物件所做的變更反映在隨表單提交的 FormData 物件中。

以上是如何在 JavaScript 中以程式設計方式設定和更新 FormData 的 FileList 長度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！