代码之家 › 专栏 › 技术社区 › ps0604

FileReader事件侦听器不能调用多次

typescript javascript

ps0604 · 技术社区 · 4 年前

我有下面的Typescript函数,当调用它时会打开一个窗口来请求一个文件,在用户做出选择之后,它会在控制台中打印文件内容。

第一次可以,但问题是,如果我打两次电话,就没用了。第二次打开窗口时,如果选择了文件,则不会执行任何操作。这个函数有什么问题?

<input id="file-input" type="file" name="name" style="display: none;" />


printFile(){

    var input = document.getElementById('file-input');

    input.addEventListener('input', () => {

        var uploadedFile = (input as HTMLInputElement).files[0];

        var reader = new FileReader();

        reader.addEventListener('load', () => {
            console.log(reader.result);
        });
          
        reader.readAsText(uploadedFile);

    });
          
    input.click();

}

2 回复 | 直到 4 年前

Lucas Simões 4 年前

您正在向FileReader添加一个侦听器,然后再次实例化它。正确的工作方式应该是 (类似的样本,但使用图像)

HTML格式

<input
  #fileInput
  type="file"
  accept="image/png, image/jpeg"
  (change)="handleChosenFile($event)"
/>

打字稿

handleChosenFile(event: Event) {
  const target = event.target as HTMLInputElement;
  if (target.files && target.files.length) {
    this.selectedFile = target.files.item(0);
    const reader = new FileReader();
    reader.readAsDataURL(this.selectedFile);
    reader.onload = () => {
      // Your function
    };
  } else {
    // Your alert to "no file selected"
  }
}

JB_DELR 4 年前

 reader.addEventListener('load', () => {
            console.log(reader.result);
        });

 reader.addEventListener('load', (event) => {
            console.log(event.target.result);
        });

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前