Javascript FileReader und FileReaderSync read as Data URL

Javascript Dateien in den Browser laden

Der FileReader gibt Javascript Zugriff auf das lokale Dateisystem (File API W3C Working Draft, 6 February 2023). Das FileReader-Objekt liest den Inhalt einer Datei oder eines Raw-Daten-Puffers auf dem Rechner des Users mit dem File- oder Blob-Objekt.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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

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
Beispiel: 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 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.