时间戳

首页 > 解决方案 > 如何从 Angular 8 中的 HTML 输入元素中获取文件数？

angular - 如何从 Angular 8 中的 HTML 输入元素中获取文件数？

问题描述

目前我的脚本只能处理一个正在添加的文件：

fileEvent(fileInput: Event){
    this.fileName = (<HTMLInputElement>fileInput.target).files[0].name;
    this.fileSize = Math.round(((<HTMLInputElement>fileInput.target).files[0].size) / 1000);
    this.fileAdded = true;
}

这是 HTML：

<input (change)="fileEvent($event)" type="file" name="files" accept=".pcap" style='display: none;' #file>
<div id="filelist" *ngIf="fileAdded">
    <p id="file">{{ fileName }}</p>
    <p id="filesize">{{ fileSize }} KB</p>
</div>

我想知道如何获取输入元素中的文件数。我正在尝试遍历元素以获取它们的名称和大小，以便可以在我的网站上显示它们。

编辑：显然我还没有尝试过最明显的事情，那就是在最后添加 .length 。这样就解决了。

this.numOfFiles = (<HTMLInputElement>fileInput.target).files.length;

标签： angularfileinput

解决方案

您需要像这样使用multiple输入类型的属性file-

<input multiple (change)="fileEvent($event)" type="file" name="files" accept=".pcap" #file>

它会返回一个文件数组，你可以使用 -

fileInput.target.files

更详细的请参考

推荐阅读