webentwicklung-frage-antwort-db.com.de

Ermitteln Sie den Dateinamen aus der Eingabetypdatei Angular2

Ich möchte den Dateinamen von meinem HTML-Eingabe-Tag in einer modalen Ansicht abrufen und mit Angular2 speichern. Kann mir jemand helfen?

htmlangularangular2-templatehtml-input
8
Sandro De Marco

Sie können als nächstes tun:

HTML:

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

Typoskript:

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

Sie können eine elegantere Option ausprobieren:

HTML:

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

Skript:

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

Diese Arbeit formt mich:

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 );
  }
1
Alvargon
<button (click)="imgFileInput.click()">Add</button>
    {{ imgFileInput?.files[0]?.name }}
<input hidden type="file" #imgFileInput (change)="uploadSingle($event)"/>
1
Stepan Prokopiak

HTML

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

Skript

onFileChange(event) {    
     let files = event.target.files[0].name;
}
0
Vivek Singh

Die von @ Selçuk Cihan vorgeschlagene https://stackoverflow.com/a/44932086/4281182 -Lösung hat nicht geholfen. Daher bestand meine Problemumgehung darin, den Parametertyp fileInput auf diese Weise auf "any" zu setzen

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

in der TS-Laufzeit ist dies also ein reiner JS-Code

Wie auch immer, danke für dieses großartige Ans, es hat mir viel Zeit gespart

0
Mohammed Yousif