Dateien vom PC mit Hilfe von JavaScript einlesen

Sie möchten auf Ihrer Webseite eine Datei-Upload-Funktion integrieren? Dies stellt in der Regel kein großes Problem dar: Sie nehmen einfach ein HTML-Formular mit einem input HTML-Element und dem Wert file im type-Attribut. Die Verarbeitung erfolgt dann serverseitig z. B. mittels PHP.

Doch was ist eigentlich, wenn Sie die Datei gar nicht auf den Server hochladen möchten, sondern die Datei direkt im Browser mit JavaScript verarbeiten möchten? Bisher gab es dafür keine Lösung, doch mit Hilfe der File API ist dies nun endlich möglich.

Hintergrundinformationen

Die File API ist eine Webbrowser-Schnittstelle, die es einer Skriptsprache wie JavaScript ermöglicht, auf Dateien vom PC zuzugreifen. Die Schnittstelle wird vom W3C und deren Mitgliedern (beteiligt sind unter anderem die Mozilla Corporation und Google) entworfen und befindet sich aktuell ( Stand Februar 2018 ) noch im Arbeitsentwurf (englisch Working Draft).

Die Unterstützung der Browser für die API ist jedoch bereits ganz gut: So unterstützen Mozilla Firefox, Google Chrome, Safari und Opera die File API bereits seit längerem vollständig. Ab dem Internet Explorer 10 ist die Unterstützung im Microsoft eigenen Browser ebenfalls fast vollständig implementiert. Auch bei den Browsern für Mobilgeräte sieht die Unterstützung gut aus.

Wichtig: Der Zugriff auf Dateien vom PC beschränkt sich aus Sicherheitsgründen natürlich auf die explizite Auswahl einer oder mehrerer Dateien durch den Benutzer.

HTML-Formular

Schauen wir uns, bevor wir mit dem JavaScript-Teil fortfahren, nochmals kurz den HTML-Aufbau an: Wie wir bereits in der Einleitung angesprochen haben, benötigen wir zunächst ein HTML-Formular (form-Element) und ein Eingabefeld für die Datei. Für Letzteres benötigen wir also ein input-Element mit dem Attribut type und dem Wert file. Dies sieht dann z. B. so aus:

<form name="uploadForm">
    <input type="file" name="uploadField" />
</form>

Übrigens: Falls Sie den Benutzer mehrere Dateien auswählen lassen möchten, können Sie das input-Element mit dem Attribut multiple erweitern.

JavaScript-Schnittstelle

Nachdem wir das Formular in HTML erstellt haben, können wir nun mittels JavaScript auf dieses zugreifen. Der Zugriff auf das Datei-Eingabefeld unterscheidet sich dabei erstmal nicht von einem Zugriff auf ein ganz normales Text-Eingabefeld. An Stelle der Eigenschaft value, um auf den Wert eines Eingabefelds zuzugreifen, verwenden wir nun die Eigenschaft files.

Die Eigenschaft files stellt ein Objekt vom Typ FileList zur Verfügung, welches vergleichbar mit einem Array ist. Über das Attribut length können wir die Anzahl an Dateien in der Liste abrufen. Mit Hilfe der Funktion item() können wir ein einzelnes File-Objekt aus der Liste abrufen. Der Funktion wird dabei als Parameter der Index übergeben. Hier ein Beispiel:

var iFileCount = document.forms. uploadForm. uploadField.files.length;
var oFirstFile = document.forms. uploadForm. uploadField.files.item(0);

Alternativ zur Funktion item() können wir auch die von Arrays bekannten eckigen Klammern [] verwenden. Dies sieht dann so aus:

var oFirstFile = document.forms. uploadForm. uploadField.files[0];

Wie bereits oben angesprochen, stellen die FileList-Objekte eine Liste an File-Objekten zur Verfügung. Das File-Objekt verfügt dabei selbst über ein paar Eigenschaften, die nähere Informationen zur Datei geben. Hier eine Liste der wichtigsten Eigenschaften:

lastModified	Zeitstempel der letzten Änderung der Datei in Millisekunden seit dem 01.01.1970
name	Name der Datei (inkl. Dateierweiterung)
size	Größe der Datei in Bytes
type	MIME-Typ der Datei

Wichtig: Die Eigenschaft name stellt nur den Dateinamen der Datei dar. Aus Sicherheitsgründen haben Sie keine Möglichkeit, den physikalischen Pfad der Datei zu ermitteln.

Übrigens: Die Eigenschaften size und type werden dem File-Objekt von dem Blob-Objekt vererbt. Dies bedeutet auch, dass bei allen Funktionen, die ein Blob-Objekt als Parameter benötigen, ein File-Objekt übergeben werden kann.

Lesen der Datei

Nachdem wir nun die Datei bereits als File-Objekt vorliegen haben, können wir mit Hilfe eines FileReader-Objekts den Inhalt der Datei auslesen. Wir müssen also zunächst eine Instanz von FileReader erzeugen:

var oReader = new FileReader();

Als nächstes können wir das Auslesen der Datei starten. Hierfür stehen uns die folgenden 4 Funktionen zur Verfügung:

• readAsArrayBuffer() liest die Datei in ein ArrayBuffer-Objekt ein
• readAsBinaryString() liest die Datei als binäre Zeichenkette ein
• readAsDataURL() liest die Datei als Data-URL ein (diese kann z. B. direkt im src-Attribut eines Bilds verwendet werden)
• readAsText() liest die Datei als textuelle Zeichenkette ein (der optionale 2. Parameter gibt die Textkodierung an; z. B. "UTF-8" oder "ISO-8859-1"; standardmäßig wird "UTF-8" angenommen)

Allen Funktionen muss als erster Parameter ein Blob- oder File-Objekt übergeben werden. Wichtig zu wissen ist, dass alle Funktionen asynchron arbeiten, d. h. die Funktionen starten lediglich das Auslesen der Datei. Um die gelesenen Daten dann abzuholen, steht die Eigenschaft result zur Verfügung. Der Inhalt dieser Eigenschaft ist jedoch erst gültig, sobald das load-Event ausgelöst wird.

oReader.onload = function() {
    var sFileContent = oReader.result;
};
oReader.readAsText(oTextFile);

Übrigens: Möchten Sie das Einlesen der Datei abbrechen, so können Sie die abort() abrufen.

Wichtig: Das load-Event wird nur dann aufgerufen, falls das Auslesen der Datei vollständig und vor allem erfolgreich abgeschlossen wurde.

Als weitere Events stehen loadstart (wird ausgelöst, sobald der Lesevorgang gestartet wurde) und loadend (wird ausgelöst, sobald der Lesevorgang beendet wurde) zur Verfügung. Der Unterschied zwischen load und loadend ist, dass loadend auch aufgerufen wird, falls das Lesen der Datei fehlschlägt. Tritt beim Lesen der Datei ein Fehler auf, so kann dieser über die Eigenschaft error in Form eines DOMError-Objekts abgerufen werden.

Mit Hilfe der Eigenschaft readyState kann der aktuelle Status des FileReader-Objekts abgerufen werden. Mögliche Werte sind EMPTY (nummerischer Wert 0; es wurden noch keinen Daten gelesen), LOADING (nummerischer Wert 1; es werden aktuelle Daten gelesen) und DONE (nummerischer Wert 2; es wurden bereits Daten gelesen).

Beispiel

Im folgenden Beispiel haben Sie die Möglichkeit, eine einzelne Datei auszuwählen. Sobald eine Datei gewählt wurde, wird geprüft, ob es sich um eine Bild- oder Textdatei handelt. Eine Bilddatei wird dabei direkt auf der Seite mit Hilfe eines img-Elements dargestellt. Handelt es sich um eine Textdatei, so wird der Inhalt in einem pre-Element angezeigt.

HTML-Code:

<form name="upload">
    <input type="file" name="file" onchange="OnShowSelectedFile()" />
</form>

<br />

<div id="uploadInfo" style="font-style: italic; color: red;">Bitte wählen Sie eine Datei!</div>

<img id="uploadedImage" width="500" style="display: none;" />

<pre id="uploadedText" style="display: none;"></pre>

JavaScript-Code:

var oReader = new FileReader();

function OnShowSelectedFile()
{
    var aFileList, elInfo, elImage, elText;
    
    // Prüfen, ob aktuell eine Datei geladen wird und diesen Vorgang abbrechen
    if (oReader.readyState == FileReader.LOADING)
        oReader.abort();
    
    // Dateiliste laden
    aFileList = document.forms.upload.file.files;
    
    // Elemente laden
    elInfo = document.getElementById("uploadInfo");
    elImage = document.getElementById("uploadedImage");
    elText = document.getElementById("uploadedText");
    
    // Elemente ausblenden
    elInfo.style.display = "none";
    elImage.style.display = "none";
    elText.style.display = "none";
    
    // Prüfen, ob eine Datei gewählt wurde
    if (aFileList.length > 0)
    {
        // Prüfen, ob es sich um eine Bild-Datei handelt
        if (aFileList[0].type.indexOf("image/") == 0)
        {
            // Event-Funktion definieren
            oReader.onloadend = function() {
                // Falls ein Fehler aufgetreten ist, Infofeld mit Fehler anzeigen
                if (oReader.error != null)
                {
                    elInfo.style.display = "block";
                    elInfo.innerHTML = "Fehler beim Laden der Datei!";
                }
                // Andernfalls Bild anzeigen und URL setzen
                else
                {
                    elImage.style.display = "block";
                    elImage.src = oReader.result;
                }
            };
            
            // Lesen der Datei als Data-URL starten
            oReader.readAsDataURL(aFileList[0]);
        }
        // Andernfalls prüfen, ob es sich um eine Text-Datei handelt
        else if (aFileList[0].type.indexOf("text/") == 0)
        {
            // Event-Funktion definieren
            oReader.onloadend = function() {
                // Falls ein Fehler aufgetreten ist, Infofeld mit Fehler anzeigen
                if (oReader.error != null)
                {
                    elInfo.style.display = "block";
                    elInfo.innerHTML = "Fehler beim Laden der Datei!";
                }
                // Andernfalls Text anzeigen und Inhalt setzen
                else
                {
                    elText.style.display = "block";
                    elText.innerHTML = oReader.result.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
                }
            };
            
            // Lesen der Datei als Text starten
            oReader.readAsText(aFileList[0]);
        }
        // Andernfalls Infofeld anzeigen, dass das Dateiformat nicht unterstützt wird
        else
        {
            elInfo.style.display = "block";
            elInfo.innerHTML = "Das Dateiformat wird nicht unterstützt!";
        }
    }
    // Andernfalls Infofeld anzeigen, dass eine Datei gewählt werden muss
    else
    {
        elInfo.style.display = "block";
        elInfo.innerHTML = "Bitte wählen Sie eine Datei!";
    }
}