Multiple Image Preview using jQuery

=>put div in your view file:-

<input type=”file” name=”uploadedImages” id=”uploadedImages” ‘onchange’ = ‘readURL(this);’>

<div  id =”up_images”>
</div>

=> your jQuery:–

function readURL(input) {

   $(‘#up_images’).empty();

   var number = 0;

   $.each(input.files, function(value) {

       var reader = new FileReader();

       reader.onload = function (e) {

           var id = (new Date).getTime();

           number++;

           $(‘#up_images’).prepend(‘<img id=’+id+’ src=’+e.target.result+’ width=”100px” height=”100px” data-index=’+number+’ onclick=”removePreviewImage(‘+id+’)”/>’)

       };

       reader.readAsDataURL(input.files[value]);

       }); 

}