Multiple image upload preview before image uploading to the server using Jquery | 2my4edge

15 October 2015

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.

Multiple image upload preview

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

11 comments:

  1. this is really helps me...this is only what i exactly searching. Thax for providing this code

    ReplyDelete
  2. Thank you! you save me dear! I'm Koffi from Rwanda

    ReplyDelete
  3. How to limit number of image to 5 ?

    ReplyDelete
  4. wonderful code. if i want to delete 1 or 2 images from the selection then how shall i do it? I am trying but failing all the time. please help me.

    ReplyDelete
  5. can u make a script jquery ajax multiple file uploading in php mysqli database using with ajax

    ReplyDelete
  6. issue in e.target.result

    ReplyDelete
  7. can u make a script jquery ajax multiple file uploading in php mysqli database using with ajax

    ReplyDelete
  8. can u make a script jquery ajax multiple file uploading in php mysqli database using with ajax

    ReplyDelete

^