jQuery Image Upload and Preview Tutorial

16 Jan , 2014  jQuery 

Save-Preview-Image-With-jQueryThis tutorial show us how to save and preview image with jQuery. The small code of jQuery to accept the image from the user and save it to a location on the HTML.

jQuery can do many different things on your webpage and it can even change the way your webpage behaves. Today, I came across a small set of code which can read images as input and preview the same on the HTML. jQuery image upload and preview can be helpful for accepting user input as screenshots, images, documents and anything in image format. You can certainly change this code to restrict to accept only certain kind of image formats. Currently, the code can accept any kind of image formats as input.

We are actually going to create a file reader using jQuery in this tutorial.

Tutorial: jQuery Image Upload and Preview:


The code is given below:


jQuery code:

Explanation of jQuery Image Upload and Preview Code:

The HTML code is really simple. We have added a file reader with the file input tag. And a div for previewing the image read by the file input.

The jQuery loads as soon as the webpage has finished loading. It waiting for a input by the user. Once the image is uploaded by the user, we create a new FileReader object using the below code:

Using this FileReader object, we can fetch the URL of the image uploaded. This is then inserted to the id #preview as shown below by checking the File read event using oFREvent:

That’s all folks. Finally, the image is loaded to the HTML. You can view the demo or download the source code from below before signing off.


Hope you liked this quick tutorial on file reading using jQuery to upload and preview image on HTML. This code can be modified to accept any other files or enhance it as per your project needs. If you have any doubts and clarifications, please let us know by commenting below.


  • Thank’s. Very good this article.

  • rahul bawa

    Thankssssssss alot !!!! This worked so well.