Image thumbnail preview before upload with jQuery

Display a thumbnail preview of a image before upload.

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.


And now the css for our thumbnail.



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!

Tagged with:

View all contributions by


Related Articles


Stay connected with us

Add us on Google+

Follow us on Facebook

Follow us on Twitter

Get updates via RSS

Get email updates


Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">