Script for load image preview doesn´t work

Question

I create script for show image until upload , how i use 5 input files for upload , the script must let show one image , or preview image for each input file

The Script :

<script>
function handleFileSelect(evt,ids) {
  var files = evt.target.files;
  var f = files[0];
  var reader = new FileReader();

  reader.onload = (function(theFile) {
    return function(e) {
      document.getElementById('list'+ids).innerHTML = ['<img src="', e.target.result,'" title="', theFile.name, '" width="50"/>'].join('');
      ///alert("ok"+ids);
    };
  })(f);

  reader.readAsDataURL(f);
}
</script>

HTML CODE

<input type="file" id="files2" />
<output id="list2"></output>

CALLING SCRIPT FOR THIS INPUT FILE ID

<script>
document.getElementById('files2').addEventListener('change', function(){handleFileSelect('','2');},false);
</script>

As you can see i try send vars from handleFileSelect('','2') , but don´t works never and i think the code it´s well , but sure i forget something , i hope here can help me in this issue , thank´s community

The Best Regards

Answer 1

It's better if you use CreateObjectURL instead (saves more memory/cpu) it's also faster

var wrapper = document.getElementById('files')
var URL = window.URL || window.webkitURL;

wrapper.addEventListener('change', function(evt){
  var input = evt.target
  
  if (input.matches('input[type="file"]') && (input.files || [])[0]) {
    var img = new Image
    img.width = 50
    img.onload = function() {
      var output = document.getElementById(input.dataset.for)
      output.appendChild(this)
    }
    img.onerror = function(){
      console.log("You uploaded something that is not an image")
    }
    img.src = URL.createObjectURL(input.files[0])
  }
})

output {
  display: block;
}

<div id="files">
  
  <!-- Recomend adding accept attribute so you only get images -->
  <!-- just made one example -->
  <input type="file" data-for="list1" accept="image/*">
  <output id="list1"></output>

  <input type="file" data-for="list2">
  <output id="list2"></output>

  <input type="file" data-for="list3">
  <output id="list3"></output>

  <input type="file" data-for="list4">
  <output id="list4"></output>

</div>

Answer 2

Try this code

$(function () {
  var _URL = window.URL || window.webkitURL;
  $(".UploadImage").on("change", function () {
   var preview = $(this).attr("data-img");
   var file, img;
    if ((file = this.files[0])) {
     img = new Image();
      img.onload = function () {
       document.getElementById(preview).src = _URL.createObjectURL(file);   
      };
      img.src = _URL.createObjectURL(file);
    }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="file" data-img="preview1" class="UploadImage" />
<img src="" id="preview1"/>
</div>

<div>
<input type="file" data-img="preview2" class="UploadImage" />
<img src="" id="preview2"/>
</div>

<div>
<input type="file" data-img="preview3" class="UploadImage" />
<img src="" id="preview3"/>
</div>

<div>
<input type="file" data-img="preview4" class="UploadImage" />
<img src="" id="preview4"/>
</div>