22 Voix

HTML5: Input File avec Sélection de Dossier

Tutoriel de Stefan Trost | 04/04/2021 à 20:03

Dans ce didacticiel, je voudrais vous montrer comment implémenter une Input File HTML 5 dans laquelle vous pouvez sélectionner un dossier entier au lieu de certains fichiers individuels.

Tout d'abord, nous examinons le code HTML requis. Nous utilisons un champ de saisie normal avec le type "file". Afin de pouvoir sélectionner plusieurs fichiers à la fois, nous avons ajouté l'attribut "multiple".

<input type="file" onchange="selectFolder(event);" webkitdirectory mozdirectory msdirectory odirectory directory multiple="multiple" />

Pour créer une entrée de répertoire à partir de l'entrée de fichier, nous avons également spécifié les attributs webkitdirectory, mozdirectory, msdirectory, odirectory et directory. En fait, ne spécifier que l'attribut "directory" devrait suffire, mais comme nous voulons également prendre en charge certains navigateurs plus anciens, nous avons également ajouté les attributs spécifiques au navigateur avec le préfixe webkit-, moz-, ms- et o-. Si le navigateur prend en charge l'un de ces attributs, au lieu de la boîte de dialogue de fichier, la boîte de dialogue de dossier du système est maintenant affichée.

Accéder aux Dossiers sélectionnés en JavaScript

Enfin, je souhaite également vous montrer comment travailler avec le dossier sélectionné et comment vous pouvez accéder aux fichiers du dossier. Pour cela, nous utilisons le JavaScript suivant, qui sera automatiquement exécuté lors du changement de sélection de dossier.

function selectFolder(e) {
   for (var i = 0; i < e.target.files.length; i++) {
      var s = e.target.files[i].name + '\n';
      s += e.target.files[i].size + ' Bytes\n';
      s += e.target.files[i].type;
      alert(s);
   }
}

Nous obtenons tous les fichiers situés dans le dossier sélectionné dans le tableau e.target.files. Dans le code ci-dessus, nous faisons simplement une boucle sur ce tableau (le nombre de fichiers est e.target.files.length) afin d'afficher des informations sur les fichiers telles que le nom, la taille et le type.

RépondrePositifNégatif

Sur l’Auteur

AvatarVous pouvez trouver des logiciels de Stefan Trost sur fr.sttmedia.com. Avez-vous besoin d'un logiciel personnalisé selon vos propres besoins? Écrivez-nous: fr.sttmedia.com/contact
Voir Profil

 

Sujets Connexes

Changer la Date du Fichier

Tutoriel | 0 Commentaires

La Recherche Askingbox

Info | 0 Commentaires

Avis Important

Veuillez noter: Les contributions publiées sur askingbox.com sont des contributions d’utilisateurs et ne doivent pas remplacer les conseils d’un professionnel. Ils ne sont pas vérifiés par des indépendants et ne reflètent pas nécessairement l’opinion de askingbox.com. Apprendre encore plus.

Participer

Posez votre propre question ou écrivez votre propre article sur askingbox.com. Voici comment.