Javascript FileReader und FileReaderSync read as Data URL

fileReader

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');
}

File-Upload: Drag & Drop oder Button?

Das input type="file"-Element erlaubt das Laden von Dateien sowohl durch einen Klick auf den Button also auch per Drag und Drop. Der Datei-Upload per Drag & Drop läuft anders ab als beim Klick des Benutzers auf den Button.

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

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

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

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

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

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

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

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

Javascript innerText und textContent

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 Fetch – beides lädt Daten von einer externen Resource.

Bilddatei mit readAsDataUrl als DataURL laden

Mit einer Data-URL werden Daten (z.B. als Wert des src-Attributs) in den Quelltext eingebettet, als wären sie der Pfad zu einer externen Datei. Tatsächlich aber steht bei einer Data URL anstelle des Pfades ein (meist sehr langer) String mit den kodierten Daten.

So liegt die Grafik als Data-URL oder Base64-kodiert im Quelltext der Webseite und muss nicht über einen HTTP-Request geladen werden.

Bilddatei als URL laden

<script>
window.onload = function() {
    const fileInput = document.getElementById('fileInput');
    const imgFile = document.getElementById('imgFile');

    fileInput.addEventListener('change', function(e) {
        const file = fileInput.files[0];
        const imageType = /image.*/;

        if (file.type.match(imageType)) {
            const reader = new FileReader();

            reader.onload = function(e) {
                imgFile.innerHTML = "";
                const img = new Image();
                img.src = reader.result;
                imgFile.appendChild(img);
            }
            reader.readAsDataURL(file);    
        } else {
            imgFile.innerHTML = "Dateityp nicht unterstützt"
        }
    });
}
</script>

Dateien und Bilder aus der Kamera / Album des Geräts auf den Server laden 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.