Angular2文件输入onchange

Question

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

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

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

Answer 1

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

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

所有与您的文件相关的信息都将用于控制台....

Answer 2

Double H 的功能对我不起作用，直到我添加了 onclick="this.value = null"，如下所示：

Answer 3

这是我对 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]);
}

}

Angular2文件输入onchange

Angular2 file input onchange

upload

file

angular