web-dev-qa-db-fra.com

Champ de saisie de fichier html ajouter des fichiers? (au lieu de remplacer)

J'essaie de créer un champ de saisie de fichier Html qui peut ajouter plusieurs fichiers au formulaire, au lieu de remplacer les fichiers choisis existants.

Il s'agit de l'élément d'entrée de fichier de base pour télécharger plusieurs fichiers:

<input type="file" id="fileupload" multiple>

Mais il remplace les fichiers choisis précédemment :(

Je ne peux pas croire que le HTML n'ait pas de fonctionnalité intégrée pour ajouter plusieurs fichiers, mais toutes les solutions que j'ai vues jusqu'à présent impliquent l'ajout d'une bibliothèque externe qui n'est pas idéale.

3
kpurens

Je pense que c'est une question pour SO.

Le champ du fichier, multiple ou non, remplacera toujours la sélection précédente. Ce que vous devez faire, c'est stocker la sélection ailleurs chaque fois que l'utilisateur sélectionne un fichier.

Le champ de fichier a une propriété files, qui contient un objet FileList, qui est essentiellement une liste d'objets File, chacun avec des propriétés comme name , type et size.

Si vous écoutez l'événement change, vous pouvez simplement ajouter les fichiers que vous venez de sélectionner à votre propre variable et même les présenter à l'utilisateur et lui permettre de supprimer un fichier. Vous pouvez immédiatement commencer à télécharger les fichiers via AJAX ou soumettre tous les fichiers lorsque le formulaire est soumis.

Voir:

https://www.w3.org/TR/FileAPI/#dfn-filelist

https://stackoverflow.com/questions/16742956/file-field-append-file-list

2
Gabriel

Je n'ai jamais eu le problème d'écraser des fichiers précédemment téléchargés. Sur le backend, votre code enregistrera les fichiers. Une façon simple de le faire est d'utiliser un compteur à partir d'une base de données afin d'enregistrer le fichier avec un ID unique.

1
Robert Baron