javascript - 在文件输入显示中显示文件名

Question

基本上，我想要做的是从服务器获取数据并显示在我的项目中的更新页面上。在这里，我有一个要显示的图像，是的，它显示在 <div> 中显示泰勒· swift 的形象。但是，我有一个问题，我找不到在文件输入本身中显示文件名的方法。 (见下图)

因此，预期的行为是，从服务器数据获取的文件名将显示在输入本身中。例如。 泰勒 swift .jpeg

有什么办法可以使用 JavaScript 来做到这一点吗？目前正在从事 VueJS 2 项目。

Answer 1

由于安全原因，文件输入字段不允许以编程方式选择文件或设置当前选择的文件名。但是您可以使用某些方法创建一种虚假的输入字段，其中将隐藏的文件输入字段嵌入按钮元素内，如 this sample 中所示。 .

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

因此，当您从服务器收到图像名称时，您可以使用它来显示在您的虚假输入中，并且当用户使用此输入选择文件时，也会显示他实际选择的文件名。