首頁 > web前端 > js教程 > 如何在 JavaScript 中以程式設計方式設定和更新 FormData 的 FileList 長度?

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

Mary-Kate Olsen
發布: 2024-12-10 22:07:14
原創
428 人瀏覽過

How to Programmatically Set and Update FileList Length for FormData in JavaScript?

在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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板