1

I have the following code. Here when I upload image it shows bigger image with its actual size but I want to have the thumbnail view of all the image with uniform dimension.

What modification should I do to to get thumbnail view of uploaded image ?

HTML

<html>
<head>
<script>   
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

</head>

<body>

<div id="wrapper">
<input id="fileUpload" type="file" multiple />
<br />
<div id="image-holder"></div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="grid_gallary.js"></script>
</body>
</html>

jquery

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

 //Get count of selected files
 var countFiles = $(this)[0].files.length;

 var imgPath = $(this)[0].value;
 var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
 var image_holder = $("#image-holder");
 image_holder.empty();


 if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
     if (typeof (FileReader) != "undefined") {

         //loop for each file selected for uploaded.
         for (var i = 0; i < countFiles; i++) {

             var reader = new FileReader();
             reader.onload = function (e) {
                 $("<img />", {
                     "src": e.target.result,
                         "class": "thumb-image"
                 }).appendTo(image_holder);
             }

             image_holder.show();
             reader.readAsDataURL($(this)[0].files[i]);
         }

     } else {
         alert("This browser does not support FileReader.");
     }
 } else {
     alert("Pls select only images");
 }
 });
hg8
  • 1,082
  • 2
  • 15
  • 28
Bimal Bhandari
  • 33
  • 4
  • possible duplicate of [How to generate a thumbnail image after adding an image inside an input type="file" in a form and submitting them both on same form](http://stackoverflow.com/questions/16500848/how-to-generate-a-thumbnail-image-after-adding-an-image-inside-an-input-type-fi) – Alvaro Montoro Jul 27 '15 at 10:41
  • check this one too: [How do I generate a thumbnail client-side in a modern browser?](http://stackoverflow.com/questions/3231449/how-do-i-generate-a-thumbnail-client-side-in-a-modern-browser/7557690#7557690) – Alvaro Montoro Jul 27 '15 at 10:47

0 Answers0