文件选择器中的 HTML 第一个文件不存在答案

【问题标题】：HTML first file in file selector doesn't exist文件选择器中的 HTML 第一个文件不存在
【发布时间】：2020-07-16 01:38:51
【问题描述】：

我要做的就是让用户上传图像文件并一个一个地显示它们，但由于某种原因，我上传的图像列表中的第一个文件永远无法工作。图像数据未定义。没有错误出现。

在这里测试：http://jsfiddle.net/59q8f3bh/

尝试只上传一张图片，然后上传多张图片。

我的 HTML：

<body>
  <input type="file" name="image" id="image" multiple accept="image/*">
  <button type="submit" onclick="upload()">Upload</button>
  <img src="">

  <script src="js/upload.js"></script>
</body>

我的 JS：

function upload() {
  var selected = document.getElementById('image');

  for (var i = 0; i < selected.files.length; i++) {
    var img = selected.files[i];
    var imgData;

    var reader = new FileReader();

    reader.addEventListener("load", function () {
      imgData = reader.result;
    }, false);

    reader.readAsDataURL(img);
    document.getElementsByTagName('img')[0].src = imgData;
    alert(i);
  }
}

【问题讨论】：

标签： javascript html image file-upload filereader

【解决方案1】：

这是solution 的小提琴。

您使用“load”等待的事件是异步的，需要一些时间，因此，当你的程序向下流动并到达这一行时：

document.getElementsByTagName('img')[0].src = imgData;

由于“加载”事件的异步性质，尚未设置 imgData，因此结果未定义。

解决方案是将 img setter 移动到事件回调中。

【讨论】：

【解决方案2】：

load事件异步发生，需要在回调函数中使用结果。

    reader.addEventListener("load", function () {
      imgData = reader.result;
      document.getElementsByTagName('img')[0].src = imgData;
    }, false);

    reader.readAsDataURL(img);
    alert(i);
  }

但您只会看到最后一张图片，因为只有一个 <img> 元素。

【讨论】：