FileReader

by Евгений

HTML

<input type="file" name="my-pic" id="file-field" class="image" multiple=""/>
 <div class="slider" ></div>

CSS

.preview{
    max-height: 200px;
    max-width: 300px;
  }
  .min {
    width: 45px;
  }

JavaScript

$(function()
   {
     $(".image").change(showPreviewImage_click);
   }
 )
 var num = 0;
 function showPreviewImage_click(e) {
   var $input = $(this);
   var inputFiles = this.files;
   if(inputFiles == undefined || inputFiles.length == 0) return;
   for (var i = 0; i<inputFiles.length; i++) {
     var id = 'id'+ ++num;
     var input = $('<input/>', {'type': "radio", 'name': "slide_switch", 'id': id});
     input.appendTo($('.slider'));
     var label = $('<label/>', {'for': id});
     var img_min = $('<img/>', {'class': 'min'});
     img_min.appendTo(label);
     label.appendTo($('.slider'));
     var inputFile = inputFiles[i];
     var img = $('<img/>', {'class': 'preview'});
     img.appendTo($('.slider'))
     var reader = new FileReader();

     reader.onload = (function (img1, img2)
       {
         return function(event) {
           img1.attr("src", event.target.result);
           img2.attr("src", event.target.result);
         };
       }
     )(img_min, img)

     reader.onerror = function(event) {
       alert("I AM ERROR: " + event.target.error.code);
     };

     reader.readAsDataURL(inputFile);}
 }