用HTML替换文件浏览按钮的最佳方法是什么?

最好的方法是使文件输入控件 几乎 不可见(通过使其透明度非常低-不可见) 可见性:隐藏 “或” 显示:无 “)绝对要把东西放在下面-放低一点 Z指数 .

这样,实际的控件将不可见,而您放在它下面的任何内容都将显示出来。但由于控件位于该按钮上方,它仍将捕获单击事件(这就是为什么要使用不透明度,而不是可见性或显示-如果使用隐藏元素,浏览器会使其不可单击)。

This article 深入研究这项技术。

浏览器不喜欢你在文件输入上乱搞,但可以这样做。我见过一些技巧,但最简单的方法是将文件输入绝对定位在您想用作按钮的任何内容上,并将其不透明度设置为零或接近零。这意味着当用户点击图片(或者你下面的图片)时,他们实际上是在点击不可见的浏览按钮。

例如:

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

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

如果不介意使用javascript,可以将文件输入的透明度设置为0,将样式化的控件通过z-index放在顶部,并将ClickEvents从按钮发送到文件输入。技术见: http://www.quirksmode.org/dom/inputfile.html

从技术上讲,这不可能用于安全目的,因此用户不会被误导。

但是,有几个解决方法-看一下 http://www.quirksmode.org/dom/inputfile.html 例如。

作为记录,这个问题已经被问到了 here (我给出了同样的答案)。

你可以使用像 SWFupload 也要这么做。