exif.js v3.3.25多选文件时仅能读取最后一张照片的DateTimeOriginal问题

问题原因 #

你代码里的file变量用var声明，属于函数级作用域。EXIF.getData是异步方法，当回调函数执行时，for循环已经跑完，所有回调里的file都指向循环最后一个文件，导致只有最后一张能拿到正确的EXIF时间数据，其余都是undefined。

解决方案 #

方案1：使用let声明变量（推荐） #

let是块级作用域，每个循环迭代都会创建独立的file变量，确保回调引用的是当前迭代的文件：

function fileSelected() {
  const files = document.getElementById("fileData").files;
  for (let index = 0; index < files.length; index++) {
    const file = files[index];
    EXIF.getData(file, function() {
      const origtime = EXIF.getTag(file, "DateTimeOriginal");
      alert(origtime);
    }); 
  }
}

方案2：用forEach遍历文件 #

forEach的回调函数会形成独立作用域，每个文件都能被正确捕获：

function fileSelected() {
  const files = document.getElementById("fileData").files;
  // 把FileList转成数组再遍历
  Array.from(files).forEach(file => {
    EXIF.getData(file, function() {
      const origtime = EXIF.getTag(file, "DateTimeOriginal");
      alert(origtime);
    }); 
  });
}

方案3：使用闭包包裹（兼容旧环境） #

如果需要兼容不支持let的旧浏览器，可以用立即执行函数（IIFE）创建独立作用域：

function fileSelected() {
  var count = document.getElementById("fileData").files.length;
  for (var index = 0; index < count; index++) {
    var file = document.getElementById("fileData").files[index];
    // 用IIFE捕获当前迭代的file
    (function(currentFile) {
      EXIF.getData(currentFile, function() {
        var origtime = EXIF.getTag(currentFile, "DateTimeOriginal");
        alert(origtime);
      });
    })(file);
  }
}

额外提示：尽量用const/let替代var，避免作用域混淆；同时给origtime加上变量声明，防止污染全局作用域。

内容的提问来源于stack exchange，提问作者chrisrth