This is something I haven't really thought of before, typically when I implement a file upload for an image the preview happens after. However, there is actually a really simple way to get a preview of it before the actual upload happens to the server. Let's take a look at an example.
Preview an image before it is uploaded 
To start with, you need a basic form with a file input and an element that will preview the image:
<form method="POST" action="myServerSideCode.php">
<label for="image">Upload image:</label>
<input id="image" type="file" oninput="pic.src=window.URL.createObjectURL(this.files[0])">
<img id="pic" />
</form>
The following solution leverages the oninput function to set the src of the img tag with the id of pic.
This can also be accomplished with a JavaScript array event for the onchange type:
image.onchange = evt => {
const [file] = image.files
if (file) {
pic.src = URL.createObjectURL(file)
}
}
Both methods work basically the same way as they rely on the URL.createObjectURL function.
Published on Jun 19, 2022
Tags: JavaScript
Related Posts
Did you enjoy this article? If you did here are some more articles that I thought you will enjoy as they are very similar to the article that you just finished reading.
- jQuery HTML Templates: 3 Solutions to get you started
- How to Convert an Existing Callback API to Promises
- How to Convert Decimal to Hexadecimal in JavaScript
- Demystifying the !! (not not) Operator in JavaScript
- Understanding the Difference Between let and var in JavaScript
- Building a Typing Speed Test Program with JavaScript
Jamie Munro is the author of ASP.NET MVC 5 with Bootstrap and Knockout.js, Knockout.js: Building Dynamic Client-Side Web Applications, 20 Recipes for Programming MVC 3, and 20 Recipes for Programming PhoneGap. He has been developing websites and web applications for over 20 years.
Jamie began his writing career in 2009. As the success of Jamie's blog grew, he turned his writing passion to books about web development in hopes that his many years of experience could be passed on to his readers.
Tutorials
Learn how to code in HTML, CSS, JavaScript, Python, Ruby, PHP, Java, C#, SQL, and more.
No matter the programming language you're looking to learn, I've hopefully compiled an incredible set of tutorials for you to learn; whether you are beginner or an expert, there is something for everyone to learn. Each topic I go in-depth and provide many examples throughout. I can't wait for you to dig in and improve your skillset with any of the tutorials below.