Sometimes, we want to load an image from a file input with JavaScript.
In this article, we’ll look at how to load an image from a file input with JavaScript.
How to load an image from a file input with JavaScript?
To load an image from a file input with JavaScript, we use the FileReader constructor.
For instance, we write
<input type="file" onchange="onFileSelected(event)" />
<img id="myimage" height="200" />
to add the input and img elements.
Then we write
function onFileSelected(event) {
const [selectedFile] = event.target.files;
const reader = new FileReader();
const imgtag = document.getElementById("myimage");
imgtag.title = selectedFile.name;
reader.onload = (event) => {
imgtag.src = event.target.result;
};
reader.readAsDataURL(selectedFile);
}
to set the onchange attribute to onFileSelected(event) to use the onFileSelected function as the input’s change event listener.
In it, we get the file from event.target.files.
Then create a FileReader object.
Next, we select the img element with getElementById.
Then we set the reader.onload property to a function that runs when readAsDataURL is done.
In it, we get the read image base64 URL string from event.target.result and set the img element’s src attribute to the base64 URL string.
Finally, we call readAsDataURL to read the file into a base64 URL.
Conclusion
To load an image from a file input with JavaScript, we use the FileReader constructor.
