CSS, HTML und Javascript mit {stil}

Javascript FileReader und FileReaderSync

Session Storage

Der FileReader gibt Javascript Zugriff auf das lokale Dateisystem (File API W3C Last Call Working Draft 12 September 2013).

Das FileReader-Objekt liest den Inhalt einer Datei oder eines Raw-Daten-Puffers auf dem Rechner des Users mit dem File- oder Blob-Objekt.

<input type="file" … > gibt Javascript lesenden Zugriff auf Dateien und auf Informationen wie Dateiname, Größe und Mimetype.

Mit dem multiple-Attribut des input-Tags hat Javascript Zugriff auf eine Liste von Dateien, aber input type="file" gibt immer eine Dateiliste FileList zurück, egal, ob multiple gesetzt ist oder nicht. FileList ist ein einfaches Array.

Prüfen, ob der Browser fileReader unterstützt

if (window.File && window.FileReader 
   && window.FileList && window.Blob) {
   // Dateiverarbeitung 
} else {
   alert('Dieser Browser unterstützt den Zugriff auf lokale Dateien nicht');
}

Textdateien lesen readAsText()

FileReader.readAsText() gibt den Inhalt der Datei als Text zurück. Die Methode hat zwei Parameter:

  • file für das file- oder Blob-Objekt, das gelesen werden soll,
  • encding (optional, UTF-8, wenn nichts angegeben ist) Encoding der Datei
Text-Dateien lesen

	

Da readAsText() asynchron ist, brauchen wir einen Event Listener auf dem input-Element. Der Event Listener feuert, wenn der Ladevorgang vom lokalen Device in den Browser beendet ist.

<input type="file" id="asText">
… 

window.onload = function() {
    var asText = document.getElementById('asText');
    var textbox = document.getElementById('textbox');

    asText.addEventListener('change', function(e) {
        var file = asText.files[0];
        var textType = /text.*/;

        if (file.type.match(textType)) {
            var reader = new FileReader();

            reader.onload = function(e) {
                textbox.innerText = reader.result;
            }

            reader.readAsText(file);    
        } else {
            textbox.innerText = "Dateitype nicht unterstützt";
        }
    });
}

Events

loadstart
feuert, wenn der Lesevorgang beginnt
progress
während des Lesevorgangs und des Decodings des Blobs
abort
Wenn der Lesevorgang abgebrochen wurde
error
Wenn ein Fehler aufgetreten ist
load
Wenn der Lesevorgang erfolgreich abgeschlossen wurde
loadend
Wenn der Request vollständig abgeschlossen ist

Der FileReader stellt drei Techniken zur Verfügung, um Binärdaten in den Speicher zu laden:

  • FileReader.readAsText(blob, label): label ist ein optionaler Parameter für das Encoding
  • FileReader.readAsDataURL(blob|file): Enthält die URL der Datei / des Blobs als URL
  • FileReader.readAsArrayBuffer(blob|file): Enthält die Daten der Datei / des Blobs als ArrayBuffer.

Die Methoden sind asynchron. Sobald die Daten geladen sind, feuert ein onload()-Event. Der Zugriff auf Dateien läuft ähnlich ab wie ein Ajax XMLHttp-Request – beides lädt Daten von einer externen Resource.

readAsDataUrl

Bilddatei als URL laden

<script type="text/javascript"">
window.onload = function() {
    var fileInput = document.getElementById('fileInput');
    var imgFile = document.getElementById('imgFile');
    fileInput.addEventListener('change', function(e) {
        var file = fileInput.files[0];
        var imageType = /image.*/;
        if (file.type.match(imageType)) {
            var reader = new FileReader();
            reader.onload = function(e) {
                imgFile.innerHTML = "";
                var img = new Image();
                img.src = reader.result;
                imgFile.appendChild(img);
            }
            reader.readAsDataURL(file);    
        } else {
            imgFile.innerHTML = "Dateityp nicht unterstützt"
        }
    });
}
</script>

Mehrere Dateien laden und Bilder aus der Kamera / Album des Geräts laden

Binärdaten sind komplexer als Texte. Dateien mit Binärdaten sind meist groß und können nicht in Zeilen gebrochen werden. Stattdessen verwendet Javascript einen Puffer, in dem Byte-Bereiche als Raw-Daten gespeichert werden. Der Puffer des FileReaderAPI wird Blob genannt.

FileReaderSync

Web Worker können File und Blob mit FileReaderSync auch synchron lesen, da bei einem Thread der Haupt-Thread nicht blockiert ist.