file - Angular2文件输入onchange

Question

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

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

我不能在输入文件上使用 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]);
    }
}

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