如何在文件选择上读取（图像数据/尺寸/文件大小/名称）多个图像？ [英] 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.

推荐答案

这是合乎逻辑的，因为你的onload = async。因此，第二次for循环通过读者参考更新到下一个读者。所以 reader.result 引用了最后创建的读者，因此只会显示该结果。您很可能只能在屏幕上看到最新的图像。要解决此问题，您可以使用匿名函数来创建新范围。例如（工作小提琴： https://jsfiddle.net/r9ecbLy5/ ）：

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]);

    }
  }
}

这篇关于如何在文件选择上读取（图像数据/尺寸/文件大小/名称）多个图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！