Javascript HTML文件选择器中的第一个文件不'；不存在_Javascript_Html_Image_File Upload_Filereader

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

javascript html image file-upload

Javascript HTML文件选择器中的第一个文件不'；不存在,javascript,html,image,file-upload,filereader,Javascript,Html,Image,File Upload,Filereader,我所要做的就是让用户上传图像文件并逐个显示，但由于某种原因，我上传的图像列表中的第一个文件无法工作。图像数据未定义。没有出现错误在此处测试：尝试只上载一个图像，然后上载多个图像我的HTML： <body> <input type="file" name="image" id="image" multiple accept="image/*"> <button type="submit" onclick="upload()">Upload</

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

在此处测试：

尝试只上载一个图像，然后上载多个图像

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

函数上传（）{
var selected=document.getElementById（'image'）；
对于（var i=0；i

加载事件异步发生，您需要在回调函数中使用结果

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

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

但是您只能看到最后一个图像，因为只有一个

元素。

加载

事件异步发生，您需要在回调函数中使用结果
    reader.addEventListener("load", function () {
      imgData = reader.result;
      document.getElementsByTagName('img')[0].src = imgData;
    }, false);

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

但您只会看到最后一张图像，因为只有一个
元素。
这里是摆弄元素的地方
使用“load”等待的事件是异步的，需要一些时间，因此，
当程序向下运行并点击这一行时：
document.getElementsByTagName('img')[0].src = imgData;

由于“加载”事件的异步性质，尚未设置imgData
，因此结果未定义
解决方案是将img setter移到事件回调中
 这是小提琴
使用“load”等待的事件是异步的，需要一些时间，因此，
当程序向下运行并点击这一行时：
document.getElementsByTagName('img')[0].src = imgData;

由于“加载”事件的异步性质，尚未设置imgData
，因此结果未定义
解决方案是将img setter移到事件回调中