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!

Tagged with:

View all contributions by

Website:

Related Articles

Advertisement

Stay connected with us

Add us on Google+

Follow us on Facebook

Follow us on Twitter

Get updates via RSS

Get email updates

FEEDBACK0

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="">