FileReader无法渲染多文件上传图片问题求助

算力阿峰

2026-5-15

解决多文件上传仅渲染第一张图片的问题

这个问题是典型的闭包作用域陷阱导致的，咱们一步步拆解原因和解决办法：

问题根源

你用var声明了循环变量i和img，而var是函数级作用域——在整个onchange函数内只有一个变量实例。当FileReader的onload异步回调触发时，循环已经执行完毕：此时i的值已经变成了e.target.files.length，img也指向最后一次循环创建的元素。这就导致只有最早触发的回调能正确赋值，后续回调要么找不到对应文件，要么覆盖到同一个img上，最终只显示第一张图。

解决方案

有两种简单的修复方式，任选其一即可：

方式1：用`let`代替`var`（ES6+推荐）

let是块级作用域，每次循环都会创建新的变量实例，能完美解决作用域共享的问题：

document.querySelector("input").onchange = function(e) {
  // 用let声明i和img，形成块级作用域
  for (let i = 0; i < e.target.files.length; i++) {
    let img = document.createElement("img");
    let reader = new FileReader();
    reader.onload = function (e) {
      img.src = e.target.result;
      document.body.appendChild(img);
    }
    reader.readAsDataURL(e.target.files[i]);
  }
}

方式2：用立即执行函数（IIFE）创建闭包（兼容旧环境）

如果需要兼容不支持ES6的旧浏览器，可以用立即执行函数把每次循环的i和img包裹起来，形成独立的作用域：

document.querySelector("input").onchange = function(e) {
  for (var i = 0; i < e.target.files.length; i++) {
    // 用IIFE保存当前循环的i和img
    (function(index) {
      var img = document.createElement("img");
      var reader = new FileReader();
      reader.onload = function (e) {
        img.src = e.target.result;
        document.body.appendChild(img);
      }
      reader.readAsDataURL(e.target.files[index]);
    })(i);
  }
}