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.

DEMO

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 BukaLapak.com, penulis sekaligus pecinta sastra, dan pembaca buku

 
Halo, perkenalkan saya Agung Setiawan.
Saya Software Engineer di BukaLapak.
Simak pemikian saya soal dunia Software Engineering via Twitter di @agungsetiawanmu dan facebook
Blog ini saya update seminggu sekali jadi sering-sering saja mampir
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 *