HTML5-JavaScript APIs: Website-Trinity
Kommentare

File-API
Trotz des File-APIs bleibt der Webbrowser, was er ist: ein Sandkasten für Webapplikationen. Das bedeutet, trotz seines vielversprechenden Namens bietet Ihnen das File-API keinen vollständigen

File-API

Trotz des File-APIs bleibt der Webbrowser, was er ist: ein Sandkasten für Webapplikationen. Das bedeutet, trotz seines vielversprechenden Namens bietet Ihnen das File-API keinen vollständigen Zugriff auf das Dateisystem des Rechners, auf dem der Webbrowser ausgeführt wird. Das wäre ein zu großes Sicherheitsrisiko. Stattdessen können Sie als Nutzer eines Webbrowsers Dateien auswählen und mithilfe des File-APIs verschiedene Operationen mit diesen Dateien durchführen. Listing 6 zeigt, wie Sie das File-API in Ihre Webapplikation einbinden können.

Listing 6: File-API
var handleFiles = function (files) {
    console.log(files[0]);

    var reader = new FileReader();

    reader.readAsText(files[0]);

    reader.onload = function () {
        console.log(reader.result)
    }
}

Die Grundlage für das File-API bildet ein Input-Element vom Typ file. Über das onchange-Event wird eine Callback-Funktion an das Element gebunden, die aufgerufen wird, sobald der Benutzer eine Datei ausgewählt hat. Das Argument, das in diesem Fall der Callback-Funktion übergeben wird, this.files, ist ein Objekt vom Typ FileList. Es enthält Informationen über die ausgewählten Dateien. Auf die erste Datei in dieser Liste greifen Sie über den Index 0 zu. In erster Linie erhalten Sie hier einige Metainformationen wie beispielsweise das Datum der letzten Änderung, den Namen, den Typ und die Größe der Datei.

Mit der length-Eigenschaft der FileList können Sie einen Iterator implementieren, mit dessen Hilfe Sie über die Liste iterieren können.

Neben der FileList und den darin enthaltenen File-Objekten existiert die Klasse FileReader. Mit Objekten dieses Typs sind Sie in der Lage, Dateien auszulesen und mit ihnen zu arbeiten. Wenn Sie eine Instanz des FileReaders generieren, können Sie mit der Methode readAsText Textdateien auslesen. Dafür übergeben Sie das File-Objekt der gewünschten Datei an die Methode. Die Bearbeitung findet asynchron statt, das bedeutet, dass Ihnen der Inhalt nicht sofort zur Verfügung steht. Um mit dem Dateiinhalt arbeiten zu können, müssen Sie der onload-Eigenschaft des Readers eine Callback-Funktion zuweisen, innerhalb derer Sie dann auf die entsprechenden Informationen zugreifen können. Sobald diese Funktion aufgerufen wird, steht Ihnen in der result-Eigenschaft des Readers der Inhalt der Datei zur Verfügung.

Mit den verschiedenen Features des File-APIs können Sie neben dem Auslesen des Inhalts von Dateien auch Uploads von Dateien selbst in die Hand nehmen und hier beispielsweise einen Fortschrittsbalken für den Upload oder ähnliches mit einbauen.

Neben der Datenhaltung und dem Dateizugriff ändern sich auch die Schnittstellen für zeitintensive Berechnungen mit den neuen JavaScript-APIs.


Im letzten Teil geht es um:

  • Web Workers
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -