Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

JavaScript: Mit File-API auf lokale Dateien zugreifen

Karteikarten (Featured Image)

Mit der Einführung von HTML5 wurden auch die Fähigkeiten von JavaScript ausgebaut. So gibt es mit der File-API eine Möglichkeit, auf lokale Dateien zuzugreifen und diese im HTML-Dokument darzustellen. Auf diese Weise lassen sich Dateien beispielsweise vor einem Upload im Browserfenster darstellen und überprüfen.

Dateien auswählen

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:

<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.

Dateien ausgeben

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.

Fazit

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?

Weiterführende Links zum Thema JavaScript:

Bitte beachte unsere Community-Richtlinien

3 Reaktionen
file api

PDF-Viewer in Javascript gibts ja schon. Fehlt noch ein videoplayer. MP3-Player gabs letztes Jahr glaube ich auch schon oder ich erinnere mich falsch.

Im Prinzip kann man jetzt alle Anwendungen wie Grafik-Bearbeitung, Textverarbeitung, ... für alle Javascript-Browser z.B. fürs Iphone programmieren.

Nett wären abstrakte Fileformat-Definitionen welche automatisiert Code-Libraries erzeugen und als Meta-Level vergleichbar wie DOM bei HTML z.b. PDFs, Word-Dokumenten, Latex-Dokumenten, ... oder allen Bilder-Formaten von TIFF über IFF bis PNG und JPG einheitliche APIs in allen Programmiersprachen verpasst ohne sich für sowas jemals wieder einen Finger krumm machen zu müssen. Binärformate sezieren ist von vorgestern für die meisten simplen Anwendungen für am Handy, Pad, SmarTV . Gigapixel-RAW-Bilder in Photoshop editieren oder Videoformate transcodieren sind dann halt Ausnahmen davon wo man noch die herkömmlichen "großen" CPUs für braucht.

marius

Muss jedesmal die atei manuell ausgewählt werden, oder gibt es eine Möglichkeit bei jedem Aufruf einer Website erneut auf dasselbe Bil zuzugreifen?
Grüße
Marius - Lv99.de

nachtgold

Sehr gut seid ihr eine Demo drunter hängt ;)

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst