Preview Image Before Upload

This blog post is going to be short, even you can skip all the sentences except for the title and code snippet. Okay, so this article is talking about how to preview an image before it is uploaded.

Preview Image

The key to make it possible is by using FileReader class.I’ll go to the sample code directly so you guys can understand.

Here we have simple HTML elements to preview an image and an input button to select the image.

HTML only won’t make it possible. As i said earlier will be using FileReader class and of course it is a JavaScrip class!.

Here is how we gonna make it

And for the little beauty of our HTML i manage to add our CSS, just few lines here.


Try to run it here for the demo and you already have what you want, congratulations! 😀

Facebook Comments

Agung Setiawan

Agung Setiawan adalah software engineer di, penulis sekaligus pecinta sastra, dan pembaca buku

Halo, perkenalkan saya Agung Setiawan.
Seorang Software Engineer di BukaLapak, penulis buku, blogger, gunpla builder, tech educator.
Simak pemikiran saya soal dunia Software Engineering via Twitter di @agungsetiawanmu dan facebook
Mau belajar Vim bareng saya?
Belajar ngoding dari nol menggunakan PHP

Leave a Reply

Your email address will not be published. Required fields are marked *