什么是最好的方式，以取代该文件"浏览"按钮在html?

Question

我知道这有可能更换浏览键，这是产生html，当你使用 input 标记 type="file.

我不知道什么是最好的方式，所以如果有人有经验，此请作出贡献。

Answer 1

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

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

这篇文章深入介绍了该技术。

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 举了一个例子。

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

Answer 5

你可以使用一个闪像上传 SWFupload 要做到这一点，作为好。