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

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

5 Kommentare
nachtgold
nachtgold

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

Antworten
marius
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

Antworten
file api
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.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung