在文件輸入顯示器中顯示文件名稱

Question

基本上，我想要做的是從服務器獲取數據並顯示在我的項目更新頁面上。因此，在這裏，我有一張圖片可以顯示，是的，它顯示在<div>中以顯示Taylor Swift的圖像。但是，我有一個問題，我找不到在文件輸入中顯示文件名的方法。 （見下圖）

因此，預期的行爲是，從服務器中的數據得到的文件名，將顯示在輸入本身。例如。 taylorswift.jpeg

有沒有什麼辦法可以做到這一點使用JavaScript？目前正在進行VueJS 2項目。

Answer 1

由於安全原因，文件輸入字段不允許以編程方式選擇文件或設置當前選定的文件名。但是，您可以使用一些方法創建一種假輸入字段，其中在隱藏文件輸入字段中嵌入了一個按鈕元素，如this sample中所示。

<button class="fake-file__input-col"> 
    <input type="file" class="fake-file__input" @change="onFileInputChange"/> 
</button> 

所以，當你從服務器接收圖像的名稱，你可以用它在你的假輸入顯示，當用戶選擇與此輸入一個文件，他的實際選擇的文件名會顯示出來。