如何使用角度检索选定的文件名？

Question

我正在使用以下代码在 Angular 应用程序中显示文件选择对话框，但我不确定如何检索选定的文件名。

<label class="btn btn-default">
    Import
    <input type="file"
           change="change()" hidden>
</label>

有推荐的方法吗？

Answer 1

首先，将事件引用传递给输入变化：

<input type="file" change="change( e )" hidden> 

其次，从事件目标中检索名称：

function change( e ) {
      const files = e.target.files;
      const file = files[0];
      const file_name = file.name;
}

阅读有关输入文件的一些文档。比如这个@Mozilla。

注意：

如果您对 onchange 事件有疑问，请为您的输入分配一些 id，可能像这样：

<input type="file" id="file_input">

然后通过该 id 查询元素，如下所示：

document.getElementById('file_input').onchange = function( e ) {
      const files = e.target.files;
      const file = files[0];
      const file_name = file.name;
      alert(file_name);
}

Answer 2

原来我错过了什么，我没有提到这是一个角度应用程序。要访问所选文件，我必须更改为

                <label class="btn btn-default">
                Import
                <input type="file"
                       (change)="change($event)" hidden>
            </label>

然后在函数中，选择的文件名在 event.target.files[0].name.

    public change($event): void {
    let that = this;
    let files = $event.target.files;
}

谢谢大家的回复。