ファイル入力でプログラムによるファイル名表示: Angular を使用して実装
P粉347804896
P粉347804896 2023-09-10 14:51:49
0
1
650
###こんばんは、###

私は Angular15 を使用してアプリケーションを開発しています。その機能の 1 つは、テーブルにチーム メンバーのデータを入力することです。

メンバーを追加するには、ボタンをクリックしてモーダル ウィンドウを表示し、データを入力し、いくつかのファイルを追加する必要があります。編集操作も同様です。

データを正常に保存し、ファイルをサーバー フォルダーにアップロードしましたが、編集中に問題が発生しました。ファイル入力ボックスにアップロードされたファイル名が表示されず、ファイルがアップロードされていないように見えます。実際にアップロードされました。

ドキュメントの名前をメンバー プロパティに保存し、ngModel を使用してファイル入力ボックスをメンバー プロパティにバインドします。

入力ボックスに「ファイルが選択されていません」というメッセージが表示され、入力ボックスにプログラムでファイル名を設定しようとすると (.ts ファイルの ViewChild と ElementRef を使用して制御します)、次のエラーが表示されます。

##core.js:1448 エラー: キャッチされません (約束内): InvalidStateError: 'HTMLInputElement' に 'value' プロパティを設定できません: この入力要素はファイル名を受け入れますが、プログラム的に null にのみ設定できます。エラー: 'HTMLInputElement' の 'value' 属性を設定できません: この入力要素はファイル名を受け入れますが、プログラムで空の文字列にのみ設定できます。

セキュリティ上のリスクがあるため、これを実行できないことは十分に理解していますが、プログラムによってファイルを挿入するのではなく、ファイルの内容ではなくファイル名を表示したいだけです。これを達成する方法はありますか?

###ありがとう。
P粉347804896
P粉347804896

全員に返信(1)
P粉384679266

Web ドキュメント内

const input = document.querySelector("input[type=file]");
input.value = "foo";
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート