如何在Html文件上传中隐藏文本字段

Question

我想知道如何隐藏标准html文件上传标签的文本字段部分

例如

<input type="file" name="somename" size="chars"> 

这显然会生成一个文本字段,并且该字段旁边是一个浏览按钮...我想隐藏文本字段部分但保留按钮.

Answer 1

这肯定会在我的项目中使用它.我希望这有帮助:)

<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />

Answer 2

我建议隐藏整个事物并放置一个单独的按钮对象,当单击它时,将最终单击输入的浏览按钮.

你可以用CSS和javascript做到这一点 - 看看这篇文章(实际上我今天第二次使用这个参考).

Answer 3

如没有任何回答中提到的最简单的方法是使用一label对input.

<input type="file" name="myFile" id="myFile">
<label for="myFile">Choose your file</label>

input[type="file"] { display: none; }

使用label将非常有用,因为单击标签会单击输入.这仅在输入id等于label的for属性时才有效.