从输入类型文件 Angular2 中获取文件名

Question

我想从模态视图中的 html 输入标签获取文件名并使用 Angular2 保存它。有人可以帮助我吗？

Answer 1

您接下来可以做的事情：

HTML:

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

打字稿：

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

Answer 2

HTML

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

脚本

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

Answer 3

您可以尝试更优雅的选择：

HTML:

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

脚本：

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

Answer 4

HTML

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

组件

uploadSingle(event) {
  const fileName = event.target.files[0].name;
}

Answer 5

这个作品来自我：

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

Answer 6

@Selçuk Cihan 建议的 link 的解决方案没有帮助所以我的解决方法是通过这样做

使 fileInput 参数类型为 "any"

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

所以在TS运行时这是一个纯JS代码

无论如何感谢这个很棒的回答，它为我节省了很多时间

从输入类型文件 Angular2 中获取文件名

Get file name from input type file Angular2

html

html-input

angular2-template

angular