以编程方式在文件输入中显示文件名:使用Angular实现
P粉347804896
P粉347804896 2023-09-10 14:51:49
0
1
648

晚上好,

我正在使用Angular15开发一个应用程序,其中一个功能是填充一个包含团队成员数据的表格。

要添加成员,需要点击一个按钮,然后显示一个模态窗口来填写数据并添加一些文件。编辑操作也是一样的。

我已经成功保存了数据并将文件上传到服务器文件夹,但是在编辑时我遇到了一个问题:在文件输入框中,上传的文件名不显示,看起来好像没有上传任何文件,尽管实际上已经上传了。

我将文档的名称存储在一个成员属性中,并使用ngModel将文件输入框与成员属性绑定。

输入框显示“未选择文件”的消息,如果我尝试在输入框上以编程方式设置文件名(我在.ts文件中使用ViewChild和ElementRef进行控制),我会得到以下错误:

core.js:1448 错误错误:未捕获(承诺中):InvalidStateError:无法在“HTMLInputElement”上设置“value”属性:此输入元素接受文件名,该文件名只能以编程方式设置为空字符串。错误:无法设置“HTMLInputElement”的“value”属性:此输入元素接受文件名,该文件名只能以编程方式设置为空字符串。

我完全理解我不能进行这个操作,因为它涉及到的安全风险,但是我不想以编程方式插入文件,我只想显示文件名,而不显示其内容。有没有办法实现这个目的?

谢谢。

P粉347804896
P粉347804896

全部回复(1)
P粉384679266

在web 文档中

const input = document.querySelector("input[type=file]");
input.value = "foo";
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板