HTML5: File Input mit Ordner-Auswahl

In diesem Tutorial möchte ich euch zeigen, wie ihr ein HTML5 File Input realisieren könnt, in dem man einen kompletten Ordner statt bloß einzelner Dateien auswählen kann.

Schauen wir uns zunächst das dafür nötige HTML an. Wir benutzen ein normales Input-Feld mit type="file". Um mehrere Dateien auf einmal auswählen zu können, haben wir das Attribut "multiple" ergänzt. Außerdem haben wir ein OnChange-Event hinzugefügt, um den ausgewählten Ordner beziehungsweise die Dateien daraus mit JavaScript auslesen und verarbeiten zu können. Den JavaScript-Code dazu schauen wir uns im nächsten Abschnitt an.

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

Damit aus dem normalen File-Input für Dateien ein Verzeichnis-Input für Ordner wird, haben wir zusätzlich die Attribute webkitdirectory, mozdirectory, msdirectory, odirectory und directory definiert. Eigentlich wäre hier nur das Attribut "directory" erforderlich, um auch ältere Browser zu unterstützen, haben wir aber auch die browserspezifischen Attribute mit dem Prefix webkit-, moz-, ms- und o- hinzugefügt. Wenn der Browser eines der Attribute unterstützt, wird statt dem Dateidialog nun ein Ordnerdialog angezeigt.

In JavaScript auf die ausgewählten Ordner zugreifen

Zuletzt möchte ich euch noch zeigen, wie wir mit dem ausgewählten Ordner umgehen können und wie wir an die Dateien ran kommen, die der Nutzer ausgewählt hat.

Dazu dient folgender JavaScript-Code, der automatisch bei einer Änderung der Ordnerauswahl aufgerufen wird, da wir die Funktion dem OnChange-Event des Input-Feldes zugewiesen haben.

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);
   }
}

Alle Dateien des ausgewählten Ordners bekommen wir im Array e.target.files geliefert.

In dem Code durchlaufen wir diesen Array einmal (die Anzahl der Dateien bekommen wir durch e.target.files.length) und geben für jede Datei Informationen über den Namen, die Größe und den Typen der Datei mit der Hilfe eines alerts aus.

Browser-Unterstützung

Unterstützt wird dieser Input-Typ von den Browsern Google Chrome (ab Version 30), Microsoft Edge (ab Version 14), Mozilla Firefox (ab Version 50) und Opera (ab Version 17). Im Internet Explorer und vielen mobilen Browsern wird die Ordner-Auswahl dagegen nicht unterstützt. Dies liegt auch daran, dass viele mobile Systeme bereits von sich aus keine Auswahl von Ordnern in ihrem System erlauben.