Image thumbnail preview before upload with jQuery

Display a thumbnail preview of a image before upload.


 
Demo


 

While building an application the other day, I needed to show a thumbnail of the image before the image was uploaded (like FaceBook’s mobile site). Let’s get started with the jQuery.

The jQuery

Below is what the html will look like. One div for the image thumbnail to be displayed in as well as a file input field.

The HTML

And now the css for our thumbnail.

The CSS

Conclusion!

So that is how you can easily show a thumbnail of the image and display it in a div. I hope you find this useful!


ADVERTISEMENT

Tags: ,

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends!

Discussion