- SPLessons

jQuery Upload multiple images with preview

Home > > Tutorial
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

jQuery Upload multiple images with preview

 jQuery Upload multiple images with preview 

 
Description :
In this article we are going to explain jQuery Upload multiple images with preview. In JavaScript we are using many objects like window, document, Navigator, for this demo we are using window objects such as File, FileList, FileReader to work with File API. The File object is used to read the individual file properties and methods like name, type, size. FileList is also used to reads the multiple files and it act as an array but not an array it's just an object. The FileReader object is used to asynchronously read the files from user's computer.    

Step1 :
In this article we are going to check the browser supported to File API or not . if the browser is support to File API , then we will bind change event handler function on files element. When this event is triggered on the file element immediately the event object received by callback function or anonymous function. In this article we are referencing "e" to event object, this event object stores the information about the event such as like e.type ,e.target. The Files information stored in e.target.files and it is a FileList object . So, It is referencing to Multiple files, now we are using for loop to get individual files of type, size, name. Why you are using for loop ? Because in this article files variable is an FileList object, act as an array to retrieve the individual files that's we are using for loop .  

 

Step2 :
We are creating FileReader object. Why this FileReader object ? FileReader object goes to read the contents of files from user's computers. FileReader object has some properties, Event handlers and Methods like FileReader.error , FileReader.onload ,FileReader.readAsDataURL(). Onload event handler function triggered every time when the reading operation successfully completed, when this function is triggered the event object received by callback function this event object stores the information about the particular event at that time result attribute added to FileReader object.

Note :
Result attribute is valid after the read operation complete. So, the read operation is done by only when the onload event handler triggered. As the result attribute used to access the file data. FileReader.readAsDataURL() used to read the image

  [css title="Find the bellow CSS code"] input[type="file"] { display:block; } .imageThumb { max-height: 75px; border: 2px solid; margin: 10px 10px 0 0; padding: 1px; } [/css] [javascript title="Find the bellow JQuery code"] <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { if(window.File && window.FileList && window.FileReader) { $("#files").on("change",function(e) { var files = e.target.files , filesLength = files.length ; for (var i = 0; i < filesLength ; i++) { var f = files[i] var fileReader = new FileReader(); fileReader.onload = (function(e) { var file = e.target; $("<img></img>",{ class : "imageThumb", src : e.target.result, title : file.name }).insertAfter("#files"); }); fileReader.readAsDataURL(f); } }); } else { alert("Your browser doesn't support to File API") } });   </script> [/javascript]   [html title="Find the bellow HTML code"] <h2>preview multiple images before upload using jQuery</h2> <input type="file" id="files" name="files[]" multiple /> [/html]