Wie werden FileList und Dateieigenschaften bei Verwendung von FormData richtig festgelegt?

Wie lege ich Dateiobjekte und die Längeneigenschaft im FileList-Objekt fest, wobei die Dateien auch im FormData-Objekt widergespiegelt werden?

Wie in der Eingabeaufforderung beschrieben, ist es möglich, die festzulegen .files-Eigenschaft des Element zu einer FileList aus einem anderen Die .files-Eigenschaft oder die DataTransfer.files-Eigenschaft des Elements.

Das FileList-Objekt verfügt jedoch über eine .length-Eigenschaft, die auch nach dem Festlegen über die .files-Eigenschaft auf 0 bleibt. Darüber hinaus ist die Übergabe eines

enthält eine Bei geänderten .files führt die Verwendung dieses Ansatzes zu einem File-Objekt mit einer .size von 0.

Um dieses Problem zu beheben, muss zunächst sichergestellt werden, dass die FileList veränderbar ist. Dies kann durch die Verwendung des DataTransfer-Konstruktors erreicht werden, wodurch eine veränderbare FileList erstellt wird, auf die über die DataTransferItemList zugegriffen werden kann.

Sobald die FileList veränderbar ist, können die Dateien mithilfe der Methode DataTransferItemList.add() einzeln festgelegt werden. Dadurch wird auch sichergestellt, dass die FileList.length-Eigenschaft auf die richtige Anzahl von Dateien eingestellt ist.

Durch Befolgen dieses Verfahrens werden die Dateien auch im aus dem Formular erstellten FormData-Objekt widergespiegelt.

Hier ein Beispiel:

const dT = new DataTransfer();
dT.items.add(new File(['foo'], 'programmatically_created.txt'));
document.querySelector('input[type="file"]').files = dT.files;

Bei diesem Ansatz wird die FileList des Das Element wird mit der im DataTransfer-Objekt erstellten Datei gefüllt. Die FileList.length-Eigenschaft wird auf 1 gesetzt und die Datei wird im aus dem Formular erstellten FormData-Objekt widergespiegelt.

Das obige ist der detaillierte Inhalt vonWie werden FileList und Dateieigenschaften bei Verwendung von FormData richtig festgelegt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!