如何使用angular檢索選定的文件名？

Question

我正在使用以下代碼在角度應用程序中顯示文件選擇對話框，但不確定如何檢索所選文件名。

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

謝謝大家的答復。