Multiple image upload preview before image uploading to the server using Jquery

Here i'm going to tell you one of the useful tip for multiple image uploading preview, when ever we are uploading image we need instant image preview, for that we are going to use html5 filereader. and here we are going to use the jquery for instant image preview. let see the simple code.

DOWNLOAD                                   LIVE DEMO

HTML CODE

<div id="wrapper">
    <input id="imageupload" type="file" multiple />
    <br />
    <div id="preview-image"></div>
</div>

JQUERY & SCRIPT

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type="text/javascript">
 $("#imageupload").on('change', function () {
 
     var countFiles = $(this)[0].files.length;
 
     var imgPath = $(this)[0].value;
     var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
     var image_holder = $("#preview-image");
     image_holder.empty();
 
     if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
         if (typeof (FileReader) != "undefined") {
 
             for (var i = 0; i < countFiles; i++) {
 
                 var reader = new FileReader();
                 reader.onload = function (e) {
                     $("<img />", {
                         "src": e.target.result,
                             "class": "thumbimage"
                     }).appendTo(image_holder);
                 }
 
                 image_holder.show();
                 reader.readAsDataURL($(this)[0].files[i]);
             }
 
         } else {
             alert("It doesn't supports");
         }
     } else {
         alert("Select Only images");
     }
 });
 </script>

CSS

<style type="text/css">
.thumbimage {
    float:left;
    width:100px;
    position:relative;
    padding:5px;
}
</style>

I hope this post is really helpful for all, thanks for visiting, Keep visiting for more updates.

RELATED POSTS :
Floating menu using Jquery
Full screen API using JQuery
Create custom file chosen input type using Css and Jquery
Animated scroll to top by using Jquery
Image gallery with lightbox effect using Jquery
E-commerce site like image zoomer
Rotate image on hover using CSS3
Image zoom on hover using css3
Image slider with random animation effects using Jquery