FileReader: result-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die result schreibgeschützte Eigenschaft des FileReader-Interfaces gibt den Inhalt der Datei zurück. Diese Eigenschaft ist nur nach Abschluss des Lesevorgangs gültig, und das Format der Daten hängt davon ab, welche der Methoden verwendet wurde, um den Lesevorgang zu starten.

Wert

Ein entsprechender String oder ArrayBuffer, basierend darauf, welche der Lesemethoden verwendet wurde, um den Lesevorgang zu starten. Der Wert ist null, wenn das Lesen noch nicht abgeschlossen ist oder erfolglos war.

Die Ergebnistypen werden unten beschrieben.

Methode	Beschreibung
[`readAsArrayBuffer()`](/de/docs/Web/API/FileReader/readAsArrayBuffer)	Das `result` ist ein JavaScript `ArrayBuffer` mit Binärdaten.
[`readAsBinaryString()`](/de/docs/Web/API/FileReader/readAsBinaryString)	Das `result` enthält die rohen Binärdaten der Datei in einem String.
[`readAsDataURL()`](/de/docs/Web/API/FileReader/readAsDataURL)	Das `result` ist ein String mit einer `data:`-URL, die die Daten der Datei repräsentiert.
[`readAsText()`](/de/docs/Web/API/FileReader/readAsText)	Das `result` ist Text in einem String.

Beispiele

Dieses Beispiel zeigt eine Funktion reader(), die eine Datei aus einer Dateieingabe liest. Es funktioniert, indem ein FileReader-Objekt erstellt und ein Listener für load-Ereignisse erstellt wird, sodass, wenn die Datei gelesen ist, das result abgerufen und an die an reader() übergebene Rückruffunktion übergeben wird.

Der Inhalt wird als Rohtextdaten behandelt.

// Given this HTMLInputElement of type="file":
// <input id="image" type="file" accept="image/*">

function reader(file, callback) {
  const fr = new FileReader();
  fr.onload = () => callback(null, fr.result);
  fr.onerror = (err) => callback(err);
  fr.readAsDataURL(file);
}

document.querySelector("#image").addEventListener("change", (evt) => {
  // No files, do nothing.
  if (!evt.target.files) {
    return;
  }
  reader(evt.target.files[0], (err, res) => {
    console.log(res); // Base64 `data:image/...` String result.
  });
});

Angesichts der asynchronen Natur von FileReader könnten Sie einen auf Promise basierenden Ansatz verwenden. Hier ist ein Beispiel für eine Dateieingabe mit dem Attribut multiple, das ein Promise zurückgibt.

// Given this HTMLInputElement:
// <input id="images" type="file" accept="image/*" multiple>

const reader = (file) =>
  new Promise((resolve, reject) => {
    const fr = new FileReader();
    fr.onload = () => resolve(fr);
    fr.onerror = (err) => reject(err);
    fr.readAsDataURL(file);
  });

async function logImagesData(fileList) {
  let fileResults = [];
  const frPromises = fileList.map(reader);

  try {
    fileResults = await Promise.all(frPromises);
  } catch (err) {
    // In this specific case, Promise.all() might be preferred
    // over Promise.allSettled(), since it isn't trivial to modify
    // a FileList to a subset of files of what the user initially
    // selected. Therefore, let's just stash the entire operation.
    console.error(err);
    return;
  }

  fileResults.forEach((fr) => {
    console.log(fr.result); // Base64 `data:image/...` String result.
  });
}

// HTMLInputElement type="file" Event handler:
document.querySelector("#images").addEventListener("change", (evt) => {
  // If no files, do nothing.
  if (!evt.target.files) {
    return;
  }
  logImagesData([...evt.target.files]);
});

Spezifikationen

Specification
File API # dom-filereader-result

Browser-Kompatibilität

Siehe auch

FileReader