HTML5: Input File avec Sélection de Dossier

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". De plus, nous avons ajouté un événement OnChange pour lire et traiter le dossier respectivement les fichiers du dossier sélectionné avec JavaScript. Nous examinerons le code JavaScript dans la section suivante.

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

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, parce que nous avons attribué la fonction à l'événement OnChange du champ de saisie.

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 en utilisant une alert.

Support du Navigateur

Ce type d'entrée est pris en charge par les navigateurs Google Chrome (à partir de la version 30), Microsoft Edge (à partir de la version 14), Mozilla Firefox (à partir de la version 50) et Opera (à partir de la version 17). En revanche, la sélection des dossiers n'est pas prise en charge par Internet Explorer et des nombreux navigateurs mobiles. Cela est également dû au fait que de nombreux systèmes mobiles ne permettent pas du tout de sélectionner des dossiers dans leur système.