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

Question

我知道当您使用input带有type="file.

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

score 22 · Accepted Answer

最好的方法是使文件输入控件几乎不可见（通过给它一个非常低的不透明度 - 不要做“可见性：隐藏”或“显示：无”）并绝对定位它下面的东西 - 具有较低的z-index。

这样，实际控件将不可见，并且您在其下放置的任何内容都会显示出来。但是由于控件位于该按钮上方，它仍然会捕获单击事件（这就是您要使用不透明度，而不是可见性或显示的原因 - 如果您使用它们来隐藏它，浏览器会使元素不可点击）。

本文深入探讨了这项技术。

score 5 · Accepted Answer

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

例如：

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

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

score 2 · Accepted Answer

如果您不介意使用 javascript，您可以将文件输入的不透明度设置为 0，通过 z-index 将样式控件放在顶部，然后将按钮的点击事件发送到文件输入。有关技术，请参见此处：http ://www.quirksmode.org/dom/inputfile.html

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

0

您也可以使用诸如SWFupload 之类的 Flash 上传器来执行此操作。

于 2008-09-20T13:43:27.707 回答

5 回答 5