当前位置:  开发笔记 > 前端 > 正文

Angular2文件输入onchange

如何解决《Angular2文件输入onchange》经验,为你挑选了2个好方法。

我有输入文件(没有提交 - 典型的输入文件).我想在选择文件时调用一些函数.

示例:我单击"选择文件" - >选择文件 - >现在系统检测到更改并调用某些功能打印所有这些文件信息(例如图像名称).

我不能在输入文件上使用ngModel,对吗?怎么做?



1> Double H..:

在模板中使用以下内容:


然后你的组件fileChangeEvent()

public fileChangeEvent(fileInput: any){
      if (fileInput.target.files && fileInput.target.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e : any) {
            $('#preview').attr('src', e.target.result);
        }

        reader.readAsDataURL(fileInput.target.files[0]);
    }
}

所有您的文件相关信息将控制台....


如果我必须两次提交/上传相同的文件怎么办?如果我选择两次相同的文件,则不会触发change事件.我可以使用某种提交事件吗?

2> Kamalpreet..:

这是我对Double H答案的修正,以不依赖jQuery并停止webpack在e.target.result上出错。



打字稿代码

displayPhoto(fileInput) {
  if (fileInput.target.files && fileInput.target.files[0]) {
  const reader = new FileReader();

  reader.onload = ((e) => {
    this.imageSrc = e.target['result'];
  });

  reader.readAsDataURL(fileInput.target.files[0]);
}

}

推荐阅读
跟我搞对象吧
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有