Как узнать количество файлов из HTML-элемента ввода в Angular 8?

Question

На данный момент мой скрипт может обрабатывать только один добавляемый файл:

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;

Answer 1

Просто позвоните своему fileInput.target.files.length . Это уже массив файлов.

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

Вам просто нужна эта строка.

const numberOfFiles = fileInput.target.files.length;

Answer 2

Измените ввод, чтобы он мог принимать несколько файлов одновременно, используя атрибут множественный .

<input (change)="fileEvent($event)" type="file" name="files" accept=".pcap" style='display: none;' #file multiple>

В вашем сценарии просто получите длину файлов.

fileEvent(fileInput: Event){
    console.log(fileInput.target.files.length)
}

Answer 3

Вам необходимо использовать атрибут multiple для типа ввода file, например, -

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

Он вернет вам массив файлов, вы получите его, используя -

fileInput.target.files

Для более подробной информации, пожалуйста, см.