ファイル入力表示のファイル名を表示

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> 

サーバーから画像名を受信したときつまり、あなたの偽の入力で表示するためにそれを使用することができ、ユーザーは、この入力を使用してファイルを選択したとき、彼の実際の選択したファイル名も表示されます。