Question

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

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

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

Answer 1

在模板中使用以下内容：

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()

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

Answer 2

我在修正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]);
}

}

Answer 3

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

Angular2文件输入onchange

3 个答案: