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 #file type="file" (change)="updateFile(file)">

脚本：

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

Answer 3

HTML

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

脚本

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

Answer 4

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

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çukCihan建议的此链接的https://stackoverflow.com/a/44932086/4281182解决方案无济于事所以我的解决方法是通过执行

来使fileInput参数类型为“ any”

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

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

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

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

6 个答案: