如何使用angular检索所选文件名?

时间:2018-01-25 17:28:55

标签: javascript html angular

我使用以下代码在角度应用程序中显示文件选择对话框,我不知道如何检索所选文件名。

for name in dir():
    if not name.startswith('_'):
        del globals()[name]

有推荐的方法吗?

2 个答案:

答案 0 :(得分: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);
}

答案 1 :(得分:1)

它证明了我所缺少的东西,我没有提到这是一个有角度的应用程序。要访问所选文件,我必须更改为

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

谢谢大家的回复。