代码之家 › 专栏 › 技术社区 › Glen Elkins

javascript文件阅读器正在复制OnLoad回调

javascript

Glen Elkins · 技术社区 · 6 年前

下面的代码让我抓狂。当文件上传输入发生变化时,它会自动恢复,然后通过文件阅读器获取图像。令人恼火的是,我不知道为什么,那就是不断地重复onload事件。所以,当我第一次选择一个文件时,它会触发OnLoad一次,如果我选择第二个文件,输入相同的文件,OnLoad会触发两次,如果我再次选择一个文件,它会触发三次,就像这样。

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");
            }
        }

1 回复 | 直到 6 年前

Moonjsit 6 年前

每次单击都会创建新的文件读取器 <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);
})