Angular2文件输入onchange

时间:2016-07-20 08:38:41

标签: file angular upload

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

实施例: 我点击“选择文件” - >选择文件 - >现在系统检测到更改并调用一些打印所有这些文件信息的函数(例如图像名称)。

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

3 个答案:

答案 0 :(得分:41)

在模板中使用以下内容:

db.Execute strsql & salida, dbSQLPassThrough

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

fileChangeEvent()

所有与文件相关的信息都将安装....

答案 1 :(得分:5)

我在修正Double H的答案时不依赖于jQuery并停止在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 :(得分:4)

Double H的功能对我来说不起作用,直到我添加了onclick =“this.value = null”,如下所示:https://stackoverflow.com/a/42357862/634650