在<input multiple> with FileReader only上循环显示div网格中的最后一个图像

<input type="file" id="fileInput" multiple>
<div id="imageGrid"></div>

#imageGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

#imageGrid img {
  width: 100%;
  height: auto;
}

document.getElementById('fileInput').addEventListener('change', function(e) {
  var files = e.target.files;
  var imageGrid = document.getElementById('imageGrid');
  
  // 清空之前的图像
  imageGrid.innerHTML = '';
  
  // 遍历文件列表
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var reader = new FileReader();
    
    // 读取文件
    reader.readAsDataURL(file);
    
    // 读取完成后的回调函数
    reader.onload = function(e) {
      var img = document.createElement('img');
      img.src = e.target.result;
      
      // 将图像添加到div网格中
      imageGrid.appendChild(img);
    }
  }
});