Comment définir et mettre à jour par programme la longueur de la liste de fichiers pour FormData en JavaScript ?

Définition des objets de fichier et de la longueur dans FileList pour les objets FormData

Énoncé du problème :

Comment pouvons-nous définir les objets de fichier dans un objet FileList tout en mettant également à jour la propriété length de FileList et en garantissant que les modifications sont reflétées dans le FormData correspondant objet ?

Solution :

Il est possible de définir la propriété .files d'un élément à un objet FileList, mais la propriété .files.length reste initialement définie sur 0. De plus, lorsque le formulaire est soumis, la propriété size de l'objet File peut être définie sur 0.

Pour résoudre ces problèmes , nous pouvons utiliser le constructeur DataTransfer. L'objet DataTransfer nous permet de créer un objet FileList mutable accessible via DataTransferItemList. Une fois que nous avons un objet FileList mutable, nous pouvons définir les objets File et mettre à jour la propriété length en conséquence.

Voici comment implémenter cette technique :

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;

Cet extrait de code crée un nouveau élément et un objet DataTransfer. Il ajoute ensuite un fichier à l'objet DataTransfer et définit la propriété .files de l'élément d'entrée sur l'objet FileList à partir de l'objet DataTransfer.

Maintenant, lorsque vous accéderez à la propriété .files de l'élément d'entrée, vous avoir accès au(x) objet(s) File défini(s) via l'objet DataTransfer, et la propriété .length de l'objet FileList sera définie correctement.

De plus, lorsque le formulaire est soumis, les objets Fichier verront leur propriété de taille définie sur la valeur correcte. Cette approche garantit que les modifications apportées à l'objet FileList sont reflétées dans l'objet FormData soumis avec le 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!