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

Question

我知道当你使用input标签时,可以替换在html中生成的浏览按钮type="file.

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

Answer 1

最好的方法是使文件输入控件几乎不可见(通过赋予它非常低的不透明度 - 不要做" visibility:hidden "或" display:none ")并绝对定位它下面的东西 - 使用较低的z-index.

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

本文对该技术进行了深入研究.

Answer 2

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

例如:

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

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