Preview Image Before Upload it jQuery, HTML5 FileReader()


  jQuery show image before upload it on server : Here this article explains how to preview an image before uploading on the server side in jQuery. Let’s suppose you have an application where the user uploads bulk photo and then the users want to upload only some selected photo, in this case, we as a developer don’t want to upload all images photos on the server. As this effect on server load cost effect etc.

So using HTML 5 FileReader() we can able to preview the image before upload it in jQuery.

By this user can view thumbnail photos on the client side .i.e ( before uploading to server side ), and select or choose the photo which he/she wants to get upload.

Below I have address detailed code how to preview image before upload using jQuery and live example.


Using HTML5 FileReader() Preview Image - Show thumbnail image before uploading on server in jQuery javascript

What is FileReader?

The FileReader object lets web applications asynchronously read the contents of files ( or raw data buffers ) stored on the user’s computer, using File or Blob objects to specify the file or data to read, which means that your program will not stall while a file is being read. This is particularly useful when dealing with large files.

File objects may be obtained from a FileList object returned as a result of a user selecting files using the <input> element, from a drag and drop operation’s DataTransfer object, or from the mozGetAsFile() API on an HTMLCanvasElement.

The following code shows how to create a new instance of FileReader.

FileReader includes 4 options for reading a file:

  1. FileReader.readAsBinaryString(Blob|File) : The result property will contain the file/blob’s data as a binary string. Every byte is represented by an integer in the range [0..255].
  2. FileReader.readAsText(Blob|File, opt_encoding) :   The result property will contain the file/blob’s data as a text string. By default, the string is decoded as ‘UTF-8’. Use the optional encoding parameter can specify a different format.
  3. FileReader.readAsDataURL(Blob|File) :   The result property will contain the file/blob’s data encoded as a data URL.
  4. FileReader.readAsArrayBuffer(Blob|File) :  The result property will contain the file/blob’s data as an ArrayBuffer object.

Once one of these read methods is called on your FileReader object, the onloadstart, onprogress, onloadonabortonerror, and onloadend can be used to track its progress.

While for the browsers that support HTML5 i.e. Internet Explorer 10 and 11+, Mozilla FireFox, Google Chrome and Opera, and so the image preview is displayed using HTML5 FileReader API


Here we have added an input file tag and a div tag. This div tag is used as holder where we show our thumbnail image .i.e preview image before uploading it to the server with jQuery example given below.



# jQuery Code: To set preview / thumb  image  using FileReader():

Here first we bind a change event to our input file tag, then will check whether the browser supports HTML5 FileReader method, if not then will show alert message .i. Your browser is not supported.

Try it Yourself » 


Output: Using html 5 FileReader() we preview an image before upload.

Using HTML5 FileReader() Preview Image - Show thumbnail image before uploading on server in jQuery javascript  

BONUS – Multiple Image Preview before uploading in Jquery:

We have done with preview image before upload, so let go one step further. Now we are going to show you how to select multiple images and preview it before upload .i.e before the image is actually uploaded to the server using jQuery in

For uploading multiple images, we need to add multiple attributes to our file input tag.

# HTML Markup:

# jQuery:

Now we store the file length in a variable and make a For loop over it, to access all the images. Finally, our code for multiple image preview before upload looks like as shown below.

Try it Yourself » 

 You can also check these articles:

  1. An easy way to upload bulk images in c#.
  2. Upload and resize the image in using dropzone js.
  3. Preview Image before upload it with jQuery in

Hope you enjoyed this tutorial. If you have any recommendations, please let us know what you think in the comment section below! See you again next time!



  1. Overall code is good but i would like you to tweak some changes in your code like to make your file upload accept only images try adding this “”

  2. Hey Bro,

    I stuked One day on this concept finally am getting output after reading your article
    excellent article and very simple thank you so much bro and definitely ill share your article with my frnds.

  3. Hi i want to add caption for each image and i want to select one pic from selected multiple pic as cover pic so i added radio button and a text field for caption in preview in image holder but after posting it , it is not getting correctly. bcoz i am not getting the preview as the order i selected. pls help me for this

  4. What if our user chose, let say, 5 images and then wanna remove 1 or 2 images among them?
    Any way to let user just remove the mis-chosen image, not the whole selection?

  5. i have copied your code as it is written but it has failed to show a preview. wth [ i want to dsplay only one image so i copied that one that produces ur screen shot shown

    • Hi Naveed, If you go through the above code you will see, while adding an image tag to preview image have also added a CSS class “thumb-image”. You can set any height, width to “thumb-image” as per your need.

  6. Hola amigo, yo lo copio tal cual lo tienes ahí pero no me muestra ninguna imagen previa, es decir, el input file me carga la imagen pero no se me visualiza, y al mirar en la consola me dice que no ha habido ningún error. me podrías mandar el archivo de ejemplo por correo? Muchas gracias y un saludo.