jQuery image upload preview before upload it – HTML5 FileReader

Image upload is very basic functionality wich is used in almost every website. Its always good option, if you display image preview of selected image before upload it on server. For example if you have application where user can select multiple images and want to upload only selected images. So this not good if we allow them to upload all unwanted files on server which may reduce the performance of application. If you want to give your users an option that they can see image preview before uploading that image to server then you are on right place. Today we will create jquery image upload preview before upload it on server. For this purpose we will use HTML5 FileReader.

JQUERY IMAGE UPLOAD PREVIEW
JQUERY IMAGE UPLOAD PREVIEW

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.

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.
Browser must support HTML5 otherwise it will not work.

FileReader has following methods:

FileReader.abort()
Aborts the read operation. Upon return, the readyState will be DONE.

FileReader.readAsArrayBuffer()
Starts reading the contents of the specified Blob, once finished, the result attribute contains an ArrayBuffer representing the file’s data.

FileReader.readAsBinaryString()
Starts reading the contents of the specified Blob, once finished, the result attribute contains the raw binary data from the file as a string.

FileReader.readAsDataURL()
Starts reading the contents of the specified Blob, once finished, the result attribute contains a data: URL representing the file’s data.

FileReader.readAsText()
Starts reading the contents of the specified Blob, once finished, the result attribute contains the contents of the file as a text string.

Single jQuery Image preview

So lets start with HTML code. We have one input file tag and one

<div id="container">
 <input id="fileUpload" type="file" />
 <div id="image-container"></div>
</div>

jQuery Code

We will  bind onchange   event of  file input tag so when user select file onchange event will be fire. Here we are going to check weather browser support HTML5, if not then we will popup some user friendly message to upgrade his/her browser.


$("#fileUpload").on('change', function() {
  if (typeof(FileReader) == "undefined") {
    alert("Your browser doesn't support HTML5, Please upgrade your browser");
  } else {
   var container = $("#image-container");
   //remove all previous selected files
   container.empty();

  //create instance of FileReader
  var reader = new FileReader();
  reader.onload = function(e) {
    $("<img />", { "src": e.target.result }).appendTo(container);
  }
  reader.readAsDataURL($(this)[0].files[0]);
 }
 });

Try Demo

jQuery image upload preview with multiple images :

jQuery image upload preview with multiple images is not much difficult and its same as previous but it need some changes in code. Lets start again with HTML code which is almost same but has multiple property on file input tag.

 

 

<div id="container">
 <input id="fileUpload" multiple="multiple" type="file" />
 <div id="image-container"></div>
</div>

jQuery Code

For image upload preview with multiple images  first we will check how many files selected by the user.  Then we will loop over it to access all the images .

 

$("#fileUpload").on('change', function() {

  if (typeof(FileReader) == "undefined") {
    alert("Your browser doesn't support HTML5, Please upgrade your browser");
  } else {

    var container = $("#image-container");

    //remove all previous selected files
    container.empty();

    //create instance of FileReader
    var reader = new FileReader();
    reader.onload = function(e) {
      $("<img />", {
        "src": e.target.result
      }).appendTo(container);
    }
    
    reader.readAsDataURL($(this)[0].files[0]);
  }
});

 

Try Demo

Hope you enjoyed this tutorial. If you have any recommendations, please comment below!

Total Views (814)