Maison > interface Web > js tutoriel > Comment définir correctement les propriétés de FileList et de fichier lors de l'utilisation de FormData ?

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
373 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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal