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

【问题标题】：Get file name from input type file Angular2从输入类型文件Angular2获取文件名
【发布时间】：2017-07-17 19:55:12
【问题描述】：

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

【问题讨论】：

标签： html angular angular2-template html-input

【解决方案1】：

接下来你可以做：

HTML：

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

打字稿：

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

【讨论】：

以及如何获取文件分机？
对于那些获得Property 'files' does not exist on type 'EventTarget'的人，请查看stackoverflow.com/a/44932086/4281182
我的文件名未定义。
@SelçukCihan 谢谢老兄。你的评论救了我的命。

【解决方案2】：

HTML

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

脚本

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

【讨论】：

如何获取文件路径？
你可以'，这是现代浏览器中的一项安全功能。这可以提供帮助，developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

【解决方案3】：

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

HTML：

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

脚本：

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

【讨论】：

【解决方案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;
}

【讨论】：

请解释您的代码行，以便其他用户了解其功能。谢谢！
这完全没有必要。带有 for 属性的标签将完成这项工作而不会捕获任何点击。此外，我不完全确定您是否可以触发对隐藏元素的点击。

【解决方案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 );
  }

【讨论】：

【解决方案6】：

@Selçuk Cihan 建议的此链接的https://stackoverflow.com/a/44932086/4281182 解决方案没有帮助所以我的解决方法是通过这样做使 fileInput 参数类型为“any”

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

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

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

【讨论】：