JavaScript: Mit File-API auf lokale Dateien zugreifen

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:
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.
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?
Sehr gut seid ihr eine Demo drunter hängt ;)
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
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.
Hallo,
mir ist die Struktur dieses Codes klar, auch aus vielen Beispielen auf anderen Seiten und in der Literatur.
Leider haben alle diese Beispiele die gemeinsame Eigenschaft, dass sie nach der Darstellung des Datei-Inhalts aufhören.
Deshalb meine Frage: Wie komme ich konkret an den Inhalt dieser (Text-)Datei um ihn im weiteren Verlauf des JS-Anwendung nutzen zu können?
Gruß
Detlev