CODEWITHSUNDEEP
javascripthtmlcss
user8115627
user8115627

Reputation: 118

How to read(image data / dimension / filesize / name) multiple images on file select?

I am getting the same image multiple times.

document.getElementById('getFile').addEventListener('change', getFiles);
function getFiles(ev){
    var file= ev.target.files;
    if (file) {
        for(var i=0,f; f = file[i]; i++){
            if(!f.type.match('image.*')){continue;}
            var reader = new FileReader();
            reader.readAsDataURL(file[i]);
            reader.onload = function () {
                var img = new Image();
                img.onload = function() {
                    var span = document.createElement('span');
                    span.innerHTML = ['<img width="100" id="thumb" src="', img.src,'"/>'].join('');
                    document.body.appendChild(span, null);
                    var l = document.createElement('span');
                    l.innerHTML=img.width+'x'+img.height;
                    span.appendChild(l);
                    span.style="border:1px solid black; border-radius:5px; display:block";
                };
                img.src = reader.result;
            };
        }
    }
}
<input id="getFile"  type="file" multiple accept="image/jpeg">

I want a list of images with a dimension and image name label.

Upvotes: 2

Views: 125

Answers (2)

user8115627
user8115627

Reputation: 118

using function

escape();

I am now able to get the targeted file name information.

Upvotes: 0

Niels
Niels

Reputation: 49919

This is logical, because your onload = async. Therefor the 2nd time the for loop passes the reader reference is updated to the next reader. So the reader.result references to the last reader created and therefor only that result will be shown. Most likely you only get the latest image visible on your screen. To solve this you can use an anonymous function to create a new scope. For example (working fiddle: https://jsfiddle.net/r9ecbLy5/):

document.getElementById('getFile').addEventListener('change', getFiles);

function getFiles(ev) {
  var file = ev.target.files;
  if (file) {
    for (var i = 0, f; f = file[i]; i++) {
      if (!f.type.match('image.*')) {
        continue;
      }
      // Create a scope where file and reader will not be overwritten by the next loop
      (function(fileToUse){
        var reader = new FileReader();
        reader.readAsDataURL(fileToUse);
        reader.onload = function() {
          var img = new Image();
          img.onload = function() {
            var span = document.createElement('span');
            span.innerHTML = ['<img width="100" id="thumb" src="', img.src, '"/>'].join('');
            document.body.appendChild(span, null);
            var l = document.createElement('span');
            l.innerHTML = img.width + 'x' + img.height;
            span.appendChild(l);
            span.style = "border:1px solid black; border-radius:5px; display:block";
          };
          img.src = reader.result; 

         // This reader result, was always the last one. 
         //   Because reader was overwritten.
        };
      })(file[i]);

    }
  }
}

Upvotes: 1

Related Questions