html弹出选择文件的窗口,HTML - 在弹出窗口中，如何显示选定的文件预览_html_开发99编程知识库...

该组件具有3个变量和一个名为Preview的事件。变量message用于显示验证错误消息，imgURL将有要预览的上载图像URL。

preview事件首先检查上载的文件引用，

接下来，它创建一个FileReader对象，FileReader对象允许web应用程序异步读取存储在用户计算机上的文件内容，使用File或Blob对象指定要读取的文件或数据，readAsDataURL方法开始读取指定文件的内容，完成后，result属性包含URL表示文件的数据。

成功完成读取操作后，将触发reader.onload事件，load事件，imgURL值设置为FileReader对象返回的结果。

TSpublic imagePath;

imgURL: any;

public message: string;

preview(files) {

if (files.length === 0)

return;

var mimeType = files[0].type;

if (mimeType.match(/image/*/) == null) {

this.message ="Only images are supported.";

return;

}

var reader = new FileReader();

this.imagePath = files;

reader.readAsDataURL(files[0]);

reader.onload = (_event) => {