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 Juli 2015.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die readAsDataURL()-Methode der FileReader-Schnittstelle wird verwendet, um den Inhalt des angegebenen Blob oder File zu lesen. Wenn der Lesevorgang abgeschlossen 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-kodierten String darstellt.
Hinweis: Das result des Blobs kann nicht direkt als Base64 decodiert werden, ohne zuerst die Data-URL-Deklaration zu entfernen, die den Base64-kodierten Daten vorausgeht. Um nur den Base64-kodierten String zu erhalten, entfernen Sie zuerst data:*/*;base64, aus dem Ergebnis.
Syntax
readAsDataURL(blob) Parameter
Rückgabewert
Keiner (undefined).
Beispiele
Lesen einer einzelnen Datei
HTML
<input type="file" /><br /> <img src="" height="200" alt="Image preview" /> JavaScript
const preview = document.querySelector("img"); const fileInput = document.querySelector("input[type=file]"); fileInput.addEventListener("change", previewFile); function previewFile() { const file = fileInput.files[0]; const reader = new FileReader(); reader.addEventListener("load", () => { // convert image file to base64 string preview.src = reader.result; }); if (file) { reader.readAsDataURL(file); } } Ergebnis
Lesen mehrerer Dateien
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); }); 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 |