FileReader不会从多个文件渲染图像

Question

我有这种多类型文件输入，然后当onChange事件被触发到输入文件然后它将循环遍历每个文件然后创建一个FileReader（）然后渲染每个文件到一个图像，但似乎它只渲染第一个而不是每个文件，任何想法，请帮忙吗？ ＆＃13; ＆＃13; document.querySelector（＆＃34;输入＆＃34）＆＃13;     .onchange = function（e）{＆＃13;       for（var i = 0; i＆lt; e.target.files.length; i ++）{＆＃13;         var img = document.createElement（＆＃34; img＆＃34;）;＆＃13; ＆＃13;         var reader = new FileReader（）;＆＃13;         reader.onload = function（e）{＆＃13;             img.src = e.target.result;＆＃13;             document.body.appendChild（IMG）;＆＃13;         }＆＃13;         reader.readAsDataURL（e.target.files [I]）;＆＃13;       }＆＃13;     }＆＃13; IMG {＆＃13; 宽度：50像素;＆＃13; }＆＃13; ＆lt; script src =＆＃34; https：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"＆gt;＆lt; / script＆gt;＆＃13; ＆＃13; ＆lt; input type =＆＃34; file＆＃34;多个＆GT;＆LT峰; br＆GT;＆LT峰; br＆GT;＆LT峰; br＆GT;＆＃13; ＆＃13; ＆＃13;

Answer 1

FileReader异步返回结果。您可以创建一个在for循环中使用的闭包来处理每个文件。

＆＃13;

＆＃13;

document.querySelector("input")
  .onchange = function(e) {
    for (var i = 0; i < e.target.files.length; i++) {
      // use IIFE as a closure
      (function(file) {
        var img = document.createElement("img");
        var reader = new FileReader();
        reader.onload = function(e) {
          img.src = e.target.result;
          document.body.appendChild(img);
        }
        reader.readAsDataURL(file);
      })(e.target.files[i]); // pass current File to closure 
    }
  }

＆＃13;

img {
  width: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" multiple><br><br><br>

＆＃13;

＆＃13;

＆＃13;