Wie kann ich die FileList-Länge für FormData in JavaScript programmgesteuert festlegen und aktualisieren?

Festlegen von Dateiobjekten und Länge in FileList für FormData-Objekte

Problemstellung:

Wie können wir Dateiobjekte darin festlegen? ein FileList-Objekt und aktualisiert gleichzeitig die Längeneigenschaft der FileList und stellt sicher, dass die Änderungen in den entsprechenden FormData widergespiegelt werden Objekt?

Lösung:

Es ist möglich, die .files-Eigenschaft eines Element zu einem FileList-Objekt hinzufügen, aber die Eigenschaft .files.length bleibt zunächst auf 0 gesetzt. Darüber hinaus kann beim Absenden des Formulars die Größeneigenschaft des File-Objekts auf 0 gesetzt werden.

Um diese Probleme zu beheben können wir den DataTransfer-Konstruktor verwenden. Mit dem DataTransfer-Objekt können wir ein veränderliches FileList-Objekt erstellen, auf das über DataTransferItemList zugegriffen werden kann. Sobald wir ein veränderbares FileList-Objekt haben, können wir die Dateiobjekte festlegen und die Längeneigenschaft entsprechend aktualisieren.

So können Sie diese Technik implementieren:

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;

Dieses Codefragment erstellt ein neues Element und ein DataTransfer-Objekt. Anschließend fügt es dem DataTransfer-Objekt eine Datei hinzu und setzt die .files-Eigenschaft des Eingabeelements auf das FileList-Objekt des DataTransfer-Objekts.

Wenn Sie nun auf die .files-Eigenschaft des Eingabeelements zugreifen, werden Sie dies tun Sie haben Zugriff auf die Dateiobjekte, die über das DataTransfer-Objekt festgelegt wurden, und die .length-Eigenschaft des FileList-Objekts wird korrekt festgelegt.

Außerdem Wenn das Formular gesendet wird, wird die Größeneigenschaft der Dateiobjekte auf den richtigen Wert gesetzt. Dieser Ansatz stellt sicher, dass die am FileList-Objekt vorgenommenen Änderungen im FormData-Objekt widergespiegelt werden, das mit dem Formular übermittelt wird.

Das obige ist der detaillierte Inhalt vonWie kann ich die FileList-Länge für FormData in JavaScript programmgesteuert festlegen und aktualisieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!