Javascript 如何在不隐藏文本字段的情况下隐藏“输入类型文件”按钮？

我正在制作一个可打印的文档，我希望用户向其中添加一个文件。 棘手的是，我不希望在打印文档时出现按钮，我只希望文本字段显示文档的名称

---

是否可以隐藏按钮并仅显示文本字段？

我认为没有现成的解决方案，但类似的解决方案应该可以：

您可以像在链接后打印href属性一样使用此技术。您可以在用户上载数据属性时将文件名添加到数据属性，然后在打印时仅显示数据属性：

@media print{
       input[type=file]{display:none}
       input[type=file]:after {content: attr(data-filename)}
}

---

您需要一些Javascript将文件名添加到属性

数据文件名
中。无法隐藏按钮并显示文本字段。无论如何，您可以复制文档名的值并在不同的文本字段上使用它。您可以这样做：

$("#NewTextField").val($('#FileUpload').val().split("\\")[$('#FileUpload').val().split("\\").length - 1]);
$("#FileUpload").hide();

NewTextField是显示名称的文本字段，FileUpload是将文件保存到其中的按钮。您只需复制名称的值，并按“\”分割，这样您就可以得到名称，而不是整个路径

您可能需要在打印文件时执行此操作，因此请将代码放在以下内容中：

$("#PrintButton").click(function () {
 //Code above
}

这不是最好的解决方案，但确实有效：


$（“#文件上载”）.change（函数（）{
$（“#NewTextField”）.val（$（“#FileUpload”）.val（）.split（“\\”）[$（“#FileUpload”）.val（）.split（“\\”）.length-1]）；
});
input[type=“file”]{
最小宽度：0；
宽度：0；
颜色：透明；
位置：相对位置；
身高：0；
}
@媒体印刷{
输入[type='file']{
不透明度：0；
}
}




否。要做到这一点，您需要隐藏标准文件输入，并使用JS将其值复制到另一个HTML元素中，并在其位置显示。请注意，没有任何内容会让您知道此名称是如何呈现的，例如，我所知的任何浏览器都不会在此处显示
.value
，这是一个伪路径，大多数会显示文件名（
.files[0].name
），但如果文件名太长，有些会将其截断，类似地，它们会显示为允许多个文件或目录的输入而选择的n个文件的某些本地化版本。一种解决方案可能是在按钮上放置一种缓存元素，但我担心此按钮也是本地化的，并且可能具有不同的大小…
input[type=file]{display:none}
不会隐藏它。文件上载的输入字段是什么样子的？