Natürlich kann die File-API nicht auf beliebige lokale Dateien zugreifen. Nur auf solche Dateien, die zum Beispiel über ein Formular ausgewählt werden, kann man per JavaScript zugreifen:

html linenums"><input type="file" id="dateien" name="dateien" multiple="multiple" />

<ul id="dateiliste"></ul>

Im Beispiel lassen sich über ein Formular lokale Dateien auswählen. Sie werden im Anschluss allerdings nicht hochgeladen. Eine JavaScript-Funktion nimmt sich der Dateien an und gibt Informationen zur Datei aus. Daher wird dem Eingabefeld eine Funktion zugewiesen, die immer dann ausgführt wird, wenn sich der Inhalt des Eingabefeldes (also die ausgewählte Datei beziehungsweise die ausgewählten Dateien) ändert:

document.getElementById("dateien").addEventListener("change", dateiausgabe, false);

Die eigentliche JavaScript-Funktion, die Informationen zu den Dateien herausgibt, beinhaltet nur einige Zeilen:

function dateiausgabe(ereignis) {

  var dateien = ereignis.target.files;

  for (var i = 0, datei; datei = dateien[i]; i++) {

    var element = document.createElement("LI");
    var info = document.createTextNode(datei.name + " (" + datei.type + "), " + datei.size + " Bytes");
    element.appendChild(info);

    document.getElementById("dateiliste").appendChild(element);

  }

}

In der Variable „dateien“ wird das sogenannte FileList-Objekt gespeichert. Es beinhaltet Informationen über die Datei beziehungsweise die Dateien, die über das Formular ausgewählt wurden.

Das FileList-Objekt speichert alle gängigen Informationen zu den Dateien, unter anderem den Namen („datei.name“), die Dateigröße („datei.size“) in Bytes, den MIME-Typ („datei.type“) und das Datum der letzten Änderung („datei.lastModifiedDate“).

Über eine „for“-Schleife werden diese Informationen für jede ausgewählte Datei abgerufen und als HTML-Listenelement in der Variable „element“ gespeichert. Anschließend werden die Listenelemente als Kindelemente der Liste mit der ID „dateiliste“ ausgegeben.

Statt nur Informationen zu den ausgewählten Dateien auszugeben, lassen sich Dateiinhalte auch darstellen. Dazu gibt es das FileReader-Interface, welches die Ausgabe und Darstellung von Dateiinhalten im HTML-Dokument ermöglicht.

Um die Darstellung der Dateiinhalte in die Funktion einzubauen, muss man sie wie folgt anpassen:

function dateiausgabe(ereignis) {

  var dateien = ereignis.target.files;

  for (var i = 0, datei; datei = dateien[i]; i++) {

    var inhalte = new FileReader();

    inhalte.onload = (function(datei) {
      return function(e) {

        var element = document.createElement("LI");
        var info = document.createTextNode(datei.name + " (" + datei.type + "), " + datei.size + " Bytes");
        var bild = document.createElement("IMG");
        bild.setAttribute("src", e.target.result);

        element.appendChild(info);
        element.appendChild(document.createElement("BR"));
        element.appendChild(bild);

        document.getElementById("dateiliste").appendChild(element);

      };
    })(datei);

    inhalte.readAsDataURL(datei);

  }

}

In der „for“-Schleife wird über die Variable „inhalte“ eine neue Instanz des FileRader-Interfaces gestartet. Über „inhalte.onload“ lassen sich die Dateinhalte, sobald diese in den Browser geladen wurden, auslesen und ausgeben. Um sowohl auf die Dateiinformationen als auch die -inhalte zugreifen zu können, muss man einen kleinen Umweg gehen. Denn innerhalb des „onload“-Ereignisses hat man keinen Zugriff auf die Variable „datei“ mit den Dateiinformationen.

Es gibt jedoch einen Weg, die Funktion, die über „onload“ aufgerufen wird, so zu behandeln wie „normalen“ Code. Dazu wird die eigentliche Funktion mit einer weiten Funktion umschlossen – „(function(var) {})(var)“ –, welche die Variable „datei“ übergibt.

Dateiinformationen und -inhalte werden – wie im ersten Beispiel auch – als HTML-Listenelemente der Liste mit der ID „dateiliste“ übergeben.

Anschließend werden die Dateinhalte mit „readAsDataURL()“ als Data-URL gelesen und an entsprechender Stelle (hier als Wert für das „src“-Attribut des IMG-Elementes) ausgegeben.

Sollen Inhalte von Textdateien ausgegeben werden, lassen sich diese über „readAsText()“ auslesen und als gewöhnlichen Text ausgeben.

Eine Demo zu dem zweiten Beispiel findet ihr auf JsFiddle.

Mit der File-API kann bequem auf lokale Dateien zugegriffen werden. Ohne Dateien hochladen zu müssen, lassen sie sich im HTML-Dokument darstellen.

Was haltet ihr von der File-API? Welche Anwendungsbeispiele kennt ihr oder könnt ihr euch vorstellen?