Comment définir correctement les propriétés de FileList et de fichier lors de l'utilisation de FormData ?-js tutoriel-php.cn

Comment définir correctement les propriétés de FileList et de fichier lors de l'utilisation de FormData ?

Patricia Arquette

Libérer： 2024-12-08 06:19:10

original

401 Les gens l'ont consulté

How to Correctly Set FileList and File Properties When Using FormData?

Comment définir les objets File et la propriété length dans l'objet FileList où les fichiers sont également reflétés dans l'objet FormData ?

Comme décrit dans l'invite, il est possible de définir la .files de la propriété élément vers une FileList à partir d'un autre élément la propriété .files de l'élément ou la propriété DataTransfer.files.

Cependant, l'objet FileList a une propriété .length qui reste à 0 même après l'avoir définie via la propriété .files. De plus, la transmission d'un

contenant un avec des fichiers .files modifiés en utilisant cette approche, vous obtiendrez un objet File avec un .size de 0.

Pour résoudre ce problème, il est nécessaire d'abord de s'assurer que la FileList est mutable. Ceci peut être réalisé en utilisant le constructeur DataTransfer, en créant une FileList mutable accessible via DataTransferItemList.

Une fois que la FileList est mutable, les fichiers peuvent être définis individuellement à l'aide de la méthode DataTransferItemList.add(). Cela garantira également que la propriété FileList.length est définie sur le nombre correct de fichiers.

En suivant cette procédure, les fichiers seront également reflétés dans l'objet FormData créé à partir du formulaire.

Voici un exemple :

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

Copier après la connexion

Avec cette approche, la FileList du L'élément sera renseigné avec le fichier créé dans l'objet DataTransfer. La propriété FileList.length sera définie sur 1 et le fichier sera reflété dans l'objet FormData construit à partir du formulaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!