FileReader: readAsDataURL() Methode
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 readAsDataURL()
Methode des FileReader
Interfaces wird verwendet, um die Inhalte des angegebenen Blob
oder File
zu lesen. Wenn der Lesevorgang beendet ist, wird die readyState
Eigenschaft DONE
, und das loadend
Ereignis wird ausgelöst. Zu diesem Zeitpunkt enthält das result
Attribut die Daten als data: URL, die die Daten der Datei als base64-codierter String darstellt.
Hinweis:
Das result
eines Blobs kann nicht
direkt als Base64 dekodiert werden, ohne zuerst die Data-URL-Deklaration zu entfernen, die den
Base64-codierten Daten vorangeht. Um nur den Base64-codierten String zu erhalten, entfernen Sie zuerst data:*/*;base64,
aus dem Ergebnis.
Syntax
readAsDataURL(blob)
Parameter
Rückgabewert
Keiner (undefined
).
Beispiele
Einzeldatendatei lesen
HTML
<input type="file" onchange="previewFile()" /><br />
<img src="" height="200" alt="Image preview" />
JavaScript
function previewFile() {
const preview = document.querySelector("img");
const file = document.querySelector("input[type=file]").files[0];
const reader = new FileReader();
reader.addEventListener(
"load",
() => {
// convert image file to base64 string
preview.src = reader.result;
},
false,
);
if (file) {
reader.readAsDataURL(file);
}
}
Ergebnis
Mehrere Dateien lesen
HTML
<input id="browse" type="file" multiple />
<div id="preview"></div>
JavaScript
function previewFiles() {
const preview = document.querySelector("#preview");
const files = document.querySelector("input[type=file]").files;
function readAndPreview(file) {
// Make sure `file.name` matches our extensions criteria
if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
const reader = new FileReader();
reader.addEventListener(
"load",
() => {
const image = new Image();
image.height = 100;
image.title = file.name;
image.src = reader.result;
preview.appendChild(image);
},
false,
);
reader.readAsDataURL(file);
}
}
if (files) {
Array.prototype.forEach.call(files, readAndPreview);
}
}
const picker = document.querySelector("#browse");
picker.addEventListener("change", previewFiles);
Ergebnis
Spezifikationen
Specification |
---|
File API # readAsDataURL |
Browser-Kompatibilität
BCD tables only load in the browser