Получить имя файла из файла типа ввода Angular2

Я хочу получить имя файла из моего тега ввода html в модальном представлении и сохранить его с помощью Angular2. Кто-нибудь может мне помочь?

6
angular angular2-template html html-input

5 ответов

Вы можете сделать следующее:

HTML-код:

<input type="file" (change)="fileEvent($event)" />

TypeScript:

fileEvent(fileInput: Event){
    let file = fileInput.target.files[0];
    let fileName = file.name;
}
15

Вы можете попробовать более изящный вариант:

HTML-код:

<input #file type="file" (change)="updateFile(file)">

сценарий:

updateFile(file: HTMLInputElement) {
  let name = file.value;
}
2

HTML-код

<input type="file" (change)="onFileChange($event)">

скрипт

onFileChange(event) {    
     let files = event.target.files[0].name;
}
0
<button (click)="imgFileInput.click()">Add</button>
    {{ imgFileInput?.files[0]?.name }}
<input hidden type="file" #imgFileInput (change)="uploadSingle($event)"/>
0

эта работа по мне:

HTML-код

<input type="file" (change)="detectFiles($event)">
<div class="output">Seleccionado: {{ fileName }} </div>

TS

selectedFiles: FileList;
fileName: string;

detectFiles(event) {
    this.selectedFiles = event.target.files;
    this.fileName = this.selectedFiles[0].name;
    console.log('selectedFiles: ' + this.fileName );
  }
0