Bagaimana untuk Menetapkan dan Mengemas kini Panjang Senarai Fail secara Pemrograman untuk FormData dalam JavaScript?

Menetapkan Objek Fail dan Panjang dalam FileList untuk Objek FormData

Pernyataan Masalah:

Bagaimana kita boleh menetapkan objek Fail dalam objek FileList sambil mengemas kini sifat panjang FileList dan memastikan bahawa perubahan ditunjukkan dalam objek FormData yang sepadan?

Penyelesaian:

Adalah mungkin untuk menetapkan sifat .files bagi elemen ke objek FileList, tetapi sifat .files.length pada mulanya kekal ditetapkan kepada 0. Selain itu, apabila borang diserahkan, sifat saiz objek Fail boleh ditetapkan kepada 0.

Untuk menangani isu ini , kita boleh menggunakan pembina DataTransfer. Objek DataTransfer membolehkan kami mencipta objek FileList boleh ubah yang boleh diakses melalui DataTransferItemList. Setelah kami mempunyai objek FileList boleh ubah, kami boleh menetapkan objek Fail dan mengemas kini sifat panjang dengan sewajarnya.

Begini cara anda boleh melaksanakan teknik ini:

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;

Coretan kod ini mencipta yang baharu elemen dan objek Pemindahan Data. Ia kemudian menambah fail pada objek DataTransfer dan menetapkan sifat .files elemen input kepada objek FileList daripada objek DataTransfer.

Sekarang, apabila anda mengakses sifat .files elemen input, anda akan mempunyai akses kepada objek Fail yang ditetapkan melalui objek DataTransfer, dan sifat .length objek FileList akan ditetapkan dengan betul.

Selain itu, apabila borang diserahkan, objek Fail akan menetapkan sifat saiznya kepada nilai yang betul. Pendekatan ini memastikan bahawa perubahan yang dibuat pada objek FileList ditunjukkan dalam objek FormData yang diserahkan bersama borang.

Atas ialah kandungan terperinci Bagaimana untuk Menetapkan dan Mengemas kini Panjang Senarai Fail secara Pemrograman untuk FormData dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!