FileReader: result-Eigenschaft

Hinweis: Dieses Feature ist verfügbar in Web Workers.

Die schreibgeschützte result-Eigenschaft der FileReader-Schnittstelle gibt den Inhalt der Datei zurück. Diese Eigenschaft ist nur gültig, nachdem der Lesevorgang abgeschlossen ist, und das Format der Daten hängt davon ab, welche Methode verwendet wurde, um den Lesevorgang zu starten.

Wert

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

Die Ergebnistypen sind unten beschrieben.

Methode	Beschreibung
[`readAsArrayBuffer()`](/de/docs/Web/API/FileReader/readAsArrayBuffer)	Das `result` ist ein JavaScript `ArrayBuffer`, das Binärdaten enthält.
[`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 darstellt.
[`readAsText()`](/de/docs/Web/API/FileReader/readAsText)	Das `result` ist Text als String.

Beispiele

Dieses Beispiel zeigt eine Funktion reader(), die eine Datei von einem File-Input liest. Sie 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 zur Callback-Funktion übergeben wird, die an reader() übergeben wurde.

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 ein File-Input 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

BCD tables only load in the browser

Siehe auch

FileReader