我有输入文件(没有提交 - 典型的输入文件).我想在选择文件时调用一些函数.
示例:我单击"选择文件" - >选择文件 - >现在系统检测到更改并调用某些功能打印所有这些文件信息(例如图像名称).
我不能在输入文件上使用ngModel,对吗?怎么做?
在模板中使用以下内容:
然后你的组件fileChangeEvent()
为
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]);
}
}
所有您的文件相关信息将控制台....
这是我对Double H答案的修正,以不依赖jQuery并停止webpack在e.target.result上出错。
打字稿代码
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]); }
}