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

Question

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

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

我的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);
  }
}

Answer 1

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

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

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

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

Answer 2

这是 fiddle 和 solution。

您使用 "load" 等待的事件是异步的，需要一些时间，因此，当您的程序向下运行并到达此行时：

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

结果未定义，因为 imgData 由于 "load" 事件的异步性质尚未设置。

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

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

HTML first file in file selector doesn't exist

html

javascript

file-upload

image

filereader