Angular2文件输入onchange答案

【问题标题】：Angular2 file input onchangeAngular2文件输入onchange
【发布时间】：2016-11-23 09:33:34
【问题描述】：

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

示例：我点击“选择文件”-> 选择文件-> 现在系统检测到更改并调用一些函数来打印所有这些文件信息（例如图像名称）。

我不能在输入文件上使用 ngModel，对吧？该怎么做？

【问题讨论】：

【解决方案1】：

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

<img [src]="imageSrc" alt="" />
<input type="file" capture="camera" accept="image/*" (change)="displayPhoto($event)">

打字稿代码

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

}

【讨论】：

【解决方案2】：

在我添加 onclick="this.value = null" 之前，Double H 的功能对我不起作用：https://stackoverflow.com/a/42357862/634650

【讨论】：

【解决方案3】：

在您的模板中使用以下内容：

<div class="modal-body">
   <input type="file" (change)="fileChangeEvent($event)" placeholder="Upload file..." />
   <img id="preview" src="" alt="Preview">
</div>

然后你的组件fileChangeEvent() as

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

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

【讨论】：

谢谢，它有效。你知道我怎样才能显示选定的照片吗？ fileInput.target.files 响应中没有路径。
如果我必须提交/上传同一个文件两次怎么办？如果我两次选择同一个文件，则不会触发更改事件。我可以使用某种提交事件吗？
我们可以在这里使用一种类型来代替“any”吗？我的项目中有任何残疾人
@MartijnvandenBergh 请参阅下面的 Chris 回答。