Note: This feature is available in Web Workers.
The readAsDataURL() method of the FileReader interface is used to read the contents of the specified Blob or File. When the read operation is finished, the readyState property becomes DONE, and the loadend event is triggered. At that time, the result attribute contains the data as a data: URL representing the file's data as a base64 encoded string.
Note: The blob's result cannot be directly decoded as Base64 without first removing the Data-URL declaration preceding the Base64-encoded data. To retrieve only the Base64 encoded string, first remove data:*/*;base64, from the result.
readAsDataURL(blob)None (undefined).
<input type="file" /><br />
<img src="" height="200" alt="Image preview" />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);
}
}<input id="browse" type="file" multiple />
<div id="preview"></div>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);