The readAsDataURL method is used to read the contents of the specified Blob or File. When the read operation is finished, the readyState becomes DONE, and the loadend 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.
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",
() => {
preview.src = reader.result;
},
false,
);
if (file) {
reader.readAsDataURL(file);
}
}
Result
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) {
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);
Result