Lesen Sie lokale Dateien mit der Datei-API

Lesen Sie lokale Dateien mit der Datei-API

Erfahren Sie, wie Sie mit dem lokalen Dateisystem Apps erstellen, die offline besser funktionieren

Da die Anwendungen, die wir mit Webtechnologien erstellen, mit nativen Apps übereinstimmen möchten, besteht ein Bereich, in dem der Browser weiterhin herausgefordert bleibt, darin, auf Dateien auf dem System des Benutzers zuzugreifen. Browser ermöglichen es Benutzern seit vielen Jahren, Dateien auszuwählen, mit denen sie in HTML-Form auf einen Server hochgeladen werden sollen.

Der Inhalt dieser Dateien wurde jedoch immer vor JavaScript verborgen, das im Browser ausgeführt wird. Wenn wir Videodateien abspielen oder Bilder bearbeiten wollten, die sich auf dem lokalen System des Benutzers befanden, mussten wir die Datei zuerst auf einen Server hochladen.



Wenn wir den Inhalt dieser Dateien lesen könnten, könnten wir uns weniger auf serverseitige Funktionen verlassen. Zum Glück können wir mit HTML5 jetzt Dateien aus dem lokalen Dateisystem lesen. Dies bedeutet, dass wir Apps erstellen können, die offline besser funktionieren.

John Allsopp präsentierte

John Allsopp präsentierte im Jenseits von Tellerrand Berlin 2014 'Die Zukunft des Webs ist offline'. Klicken Sie sich durch, um das Video anzusehen

Mit dem HTML-Eingabeelement vom Typ = 'Datei' können Benutzer eine oder mehrere Dateien aus dem lokalen Dateisystem auswählen. Vor HTML5 bestand der Zweck der Dateieingabe ausschließlich darin, Benutzern die Auswahl von Dateien zu ermöglichen, die über ein Formular hochgeladen werden sollen. In HTML5 geben die Eingabeelemente vom Typ = 'Datei' Entwicklern jetzt Zugriff auf Metadaten zu den ausgewählten Dateien: Dateiname, Datum der letzten Änderung und Dateigröße in Byte.

Wenn der Benutzer mehrere Dateien gleichzeitig auswählen kann, müssen wir der Eingabe mehrere Attribute zuweisen. Anschließend erstellen wir einen Änderungsereignishandler für unsere Dateieingabe (wir geben diesem die ID fileChooser), der aufgerufen wird, wenn sich der Wert der Dateieingabe ändert.

document.querySelector('#fileChooser').addEventListener ('change',filesChosen, false)

Wenn der Benutzer eine Datei mit der Dateieingabe auswählt, wird unser Ereignishandler aufgerufen und empfängt das Ereignis als Argument. Das Zielattribut des Ereignisses ist die Dateieingabe. Dies hat eine Attributdatei, bei der es sich um ein Array wie das Objekt FileList handelt, das die vom Benutzer ausgewählten Dateiobjekte enthält. Auch wenn wir für unsere Eingabe kein Mehrfachattribut festgelegt haben, ist das Attribut files immer noch eine Dateiliste, die nur ein einzelnes Element enthält.

Daten abrufen

Jetzt können wir die Dateiliste durchlaufen, jede ausgewählte Datei nacheinander durcharbeiten und ihren Namen, ihre Größe und das Datum der letzten Änderung abrufen:

function filesChosen(evt){ var chosenFile = evt.target.files[0]; //get the first file in the FileList var fileName = chosenFile.name; //the name of the file as a string var fileSize = chosenFile.size; //the size of the file in bytes, as an integer var fileModifiedDate = chosenFile.lastModifiedDate; //a Date object }

Wie könnten wir diese verwenden? Nun, wir könnten localStorage verwenden, um Details zu Dateien zu speichern, die auf einen Server hochgeladen wurden, und Benutzer zu benachrichtigen, wenn wir bereits eine Datei mit demselben Namen, derselben Größe und demselben Änderungsdatum hochgeladen haben, und ihnen einen Upload zu speichern. Vor dem Hochladen ermitteln wir möglicherweise die Dateien, deren Hochladen aufgrund ihrer Größe möglicherweise lange dauert, und warnen den Benutzer.

Wie mache ich meine Facebook-Fotos privat?

Diese Informationen sind jedoch noch recht begrenzt. Glücklicherweise bietet HTML5 auch eine Möglichkeit, den Inhalt einer Datei zu lesen.

Generieren Sie Sydney - John Allsop

John Allsop wird auf der Generate Sydney über die Zukunft des Webs diskutieren. Verpassen Sie es nicht!

Dateien lesen

Mit dem FileReader-Objekt können wir den Inhalt einer Datei lesen, sobald wir eine Datei vom Benutzer erhalten haben. Aus Sicherheitsgründen muss der Benutzer uns aktiv den Verweis auf die Datei geben, damit sie lesbar ist. Es gibt eine Reihe von FileReader-Methoden, um den Inhalt einer Datei abzurufen:

  • readAsDataURL (Datei): Gibt den Inhalt der Datei als dataURL zurück, die als src eines img-Elements oder als Bild in einem Stylesheet verwendet werden kann
  • readAsText (Datei [, Codierung]): Liest die Datei als Zeichenfolge mit der angegebenen optionalen Codierung (Standard-UTF-8).
  • readAsArrayBuffer (Datei): Liest den Inhalt einer Datei als ArrayBuffer

Da JavaScript Single-Threaded ist und Dateien möglicherweise sehr groß sind, sind die FileReader-Lesemethoden asynchron. Dies bedeutet auch, dass mehrere Dateien gleichzeitig gelesen werden können. Mit FileReader.abort () können wir das Lesen einer Datei während des Vorgangs stoppen. Da diese Methoden asynchron sind, anstatt den Wert einer Variablen auf das Ergebnis der Methode zu setzen, müssen wir auf Ereignisse warten, die an das FileReader-Objekt gesendet werden.

Dieser Artikel von Alex Feyerke war einer der ersten, der den Trend für Offline-First-Webanwendungen untersuchte. Klicken Sie sich durch, um ihn zu lesen

Dieser Artikel von Alex Feyerke war einer der ersten, der den Trend für Offline-First-Webanwendungen untersuchte. Klicken Sie sich durch, um ihn zu lesen

Eines der Ereignisse, die der FileReader empfängt, wird geladen, wenn die gewünschte Datei gelesen wurde. Die Zieleigenschaft dieses Ereignisses ist der FileReader selbst - dies hat eine Eigenschaft namens result, in der der Inhalt der gelesenen Datei enthalten ist. So erhalten wir die dataURL für den Inhalt einer Datei:

var reader = new FileReader(); //create our FileReader object to read the file reader.addEventListener('load', fileRead, false); //add an event listener for the onloaded event function fileRead(event){ //called when the load event fires on the FileReader var pictureURL = event.target.result; //the target of the event is the FileReader object instance //the result property of the FileReader contains the file contents } reader.readAsDataURL(file); //when the file is loaded, fileRead will be called

Wir fügen den Ereignis-Listener für das Ladeereignis hinzu und erhalten im Handler für dieses Ereignis das Ziel.result, das den Wert der FileReader-Operation darstellt (also eine DataURL, einen String oder einen ArrayBuffer, je nachdem, welche Operation wir den FileReader gefragt haben aufführen).

Wir können auf eines der folgenden Ereignisse im FileReader-Objekt warten:

  • loadstart: Wenn FileReader mit dem Lesen der Datei beginnt
  • Fortschritt: Zeitweise, während die Datei geladen wird
  • Abbruch: Wenn das Lesen der Datei abgebrochen wird
  • Laden: Wenn das Lesen erfolgreich abgeschlossen wurde
  • loadend: Wenn die Datei entweder geladen wurde oder der Lesevorgang fehlgeschlagen ist

Wenn ein Lesevorgang erfolgreich ist, werden sowohl ein Lade- als auch ein Lastend-Ereignis ausgelöst. Wenn dies fehlschlägt, werden Fehler- und Loadend-Ereignisse ausgelöst.

Etwas zusammensetzen

Wir lassen den Benutzer eine Bilddatei auswählen und zeigen sie dann als Miniaturansicht an. Zunächst unser Eingabeelement:

and we add an event listener for when the input changes document.querySelector('#chooseThumbnail').addEvent Listener('change',showThumbNail, false)

Wenn der Benutzer eine Auswahl trifft, rufen wir die Funktion showThumbNail () auf. In HTML5 können wir accept = 'image / *' verwenden, um einen beliebigen Bildtyp zu akzeptieren. Das Ziel des Ereignisses ist das Eingabeelement mit einer Eigenschaftendatei (einem Array-ähnlichen Objekt namens FileList). Wir bekommen das erste Element in der FileList und lesen es.

function showThumbNail(evt){ var url; var file; file = evt.target.files[0]; reader = new FileReader(); //we need to instantiate a new FileReader object reader.addEventListener('load', readThumbNail, false); //we add an event listener for when a file is loaded by the FileReader //this will call our function 'readThumbNail()' reader.readAsDataURL(file); //we now read the data } function readThumbNail(event) { //this is our callback for when the load event is sent to the FileReader var thumbnail = document.querySelector('#thumbnail'); thumbnail.src = event.target.result; //the event has a target property, the FileReader with a property 'result', //which is where the value we read is located }

URLs für Dateien

Wenn wir auf eine lokale Datei zugreifen, möchten wir deren Inhalt häufig nicht direkt verwenden, sondern die Datei für einen anderen Zweck verwenden. Wenn es sich beispielsweise um eine Bilddatei handelt, möchten wir das Bild möglicherweise anzeigen. Wenn es sich um eine CSS-Datei handelt, verwenden Sie sie als Stylesheet.

Ein besonderer Fall ist die Anzeige eines Videostreams in einem Videoelement, wenn mit getUserMedia gearbeitet wird. Der einfachste Weg, dies zu tun, besteht darin, eine temporäre, anonymisierte URL vom Browser zu verwenden, die wie jede andere URL verwendet werden kann - beispielsweise als Wert eines Bild-src-Attributs. In der HTML5-Datei-API verfügt das Fensterobjekt über eine URL-Eigenschaft. Dies hat zwei Methoden:

  • createObjectURL: Erstellt eine URL für eine bestimmte Datei
  • revokeObjectURL: Zerstört die Referenz zwischen der URL und der Datei

Wir können eine auf diese Weise erstellte URL nicht in localStorage speichern und dann in einem anderen Fenster wiederverwenden, da sie nur für die Lebensdauer des Dokuments bestehen bleibt, solange das Fenster, in dem sie erstellt wurde, geöffnet ist.

Hier erfahren Sie, wie wir dies in Verbindung mit einer Eingabe vom Typ Datei verwenden können, um ein Bild aus dem lokalen Dateisystem abzurufen und als Miniaturansicht anzuzeigen. Das Eingabeelement ist genau wie zuvor:

and here's the JavaScript function showThumbNail(evt){ var url; var file; var thumbnail = document.querySelector('#thumbnail'); //this is the image element where we'll display the thumbnail file = evt.target.files[0]; //because there's no 'multiple' attribute set on the input //users can only select one //we'd want to check this is the right sort of file url = window.URL.createObjectURL(file); //we create our URL (for WebKit browsers we need webkitURL.createObjectURL) thumbnail.src = url; //we give our thumbnail image element this URL as its source }

Wir sind fertig! Sie müssen sich keine Gedanken über asynchrone Dateilesevorgänge oder Rückruffunktionen machen. Wenn wir nur eine Datei verwenden und ihren Inhalt nicht lesen möchten, ist dies bei weitem die bevorzugte Lösung.

Wie erstelle ich einen Geofilter in Photoshop?

Einpacken

Die Datei-API bringt den Browser näher an das native Dateisystem heran, sodass Benutzer Inhalte von ihrem lokalen System direkt im Browser abspielen, anzeigen und bearbeiten können, ohne dass diese an einen Server gesendet werden müssen.

Es ermöglicht uns sogar, auf die Kamera zuzugreifen und Fotos mit capture = camera als Teil des Wertes des Typattributs aufzunehmen. Wir werden jedoch noch einige Zeit (wahrscheinlich für immer) warten, um vollen Zugriff auf das native Dateisystem zu erhalten.

Verpassen Sie nicht die Eröffnungssitzung von John Allsopp - Sagen Sie die Zukunft mit diesem seltsamen alten Trick voraus - beim Generieren Sie Sydney am 5. September.