时间戳

首页 > 解决方案 > JavaScript FileReader 正在复制 onload 回调

javascript - JavaScript FileReader 正在复制 onload 回调

问题描述

以下代码让我发疯。它在文件上传输入发生更改时拾取，然后通过 FileReader 抓取图像。烦人的事情是，我不知道为什么，那就是不断地重复 onload 事件。所以我第一次选择一个文件时它会触发一次 onload，如果我选择第二个具有相同文件输入的文件，onload 会触发两次，如果我再次选择一个文件，它会触发 3 次，以此类推。

var ele = document.getElementById('photo-upload');
        ele.addEventListener('change',function(e){

            console.log("FLE CHANGED");

            var file = e.target.files[0];
            var fr = new FileReader();
            fr.onload = function(e){
                console.log("FILE READER LOADED");
            }
        }

标签： javascript

解决方案

每次单击时，您都在创建新的文件阅读器<input type="file" id="photo-upload" />。

我修改了你的代码：

const ele = document.getElementById('photo-upload');
const fr = new FileReader();
fr.onload = function(e){
  console.log("FILE READER LOADED");
}
ele.addEventListener('change',function(e){
  console.log("FLE CHANGED");
  const file = e.target.files[0];
  // load file with using on of fr methods
  // eg.
  fr.readAsArrayBuffer(file);
}

工作示例：

const ele = document.getElementById('photo-upload');
const fr = new FileReader();
fr.onload = evt => {
  console.log(evt.target);
  console.log("FILE READER LOADED");
}
ele.addEventListener('change', evt => {
  console.log("FLE CHANGED");
  const file = evt.target.files[0];
  fr.readAsArrayBuffer(file);
})
<input type="file" id="photo-upload" />

推荐阅读