在html中替换文件浏览按钮的最佳方法是什么？

Question

我知道当input代码与type="file一起使用时，可以替换html生成的浏览按钮。

我不确定什么是最好的方式，所以如果有人有这方面的经验请做出贡献。

Answer 1

最好的方法是让文件输入控件几乎不可见（通过赋予它非常低的不透明度 - 不要做“可见性：隐藏”或“ display：none “）并绝对定位其下的内容 - 使用较低的 z-index 。

这样，实际控件将不可见，并且无论你放在它下面的是什么都会显示出来。但由于控件位于该按钮上方，它仍然会捕获点击事件（这就是您想要使用不透明度，而不是可见性或显示的原因 - 如果使用这些元素隐藏它，浏览器会使元素无法点击。）

This article深入研究了这项技术。

Answer 2

浏览器真的不喜欢你搞乱文件输入，但是可以这样做。我已经看过几种技术，但最简单的方法是将文件输入绝对放在你想用作按钮的任何位置，并将其不透明度设置为零或接近零。这意味着当用户点击图像（或者其中的任何图像）时，他们实际上是在点击隐形浏览按钮。

例如：

<input type="file" id="fileInput">
<img src="...">

#fileInput{
    position: absolute;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
}

Answer 3

如果您不介意使用javascript，可以将文件输入的不透明度设置为0，通过z-index将样式控件置于顶部，并将按钮中的clickevents发送到文件输入。请参阅此处了解该技术：http://www.quirksmode.org/dom/inputfile.html

Answer 4

出于安全考虑，这在技术上是不可能的，因此不能误导用户。

但是，有几种解决方法 - 请查看http://www.quirksmode.org/dom/inputfile.html作为示例。

为了记录，这个问题已经被问到here（我给出了相同的答案）。

Answer 5

您也可以使用像SWFupload这样的Flash上​​传器来执行此操作。