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