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

【问题标题】：What is the best way to replace the file browse button in html?替换html中文件浏览按钮的最佳方法是什么？
【发布时间】：2010-09-11 14:39:28
【问题描述】：

我知道当您将input 标记与type="file 一起使用时，可以替换在html 中生成的浏览按钮。

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

【问题讨论】：

【解决方案1】：

最好的方法是让文件输入控件几乎不可见（通过给它一个非常低的不透明度 - 不要做“visibility: hidden”或“display: none") 并在其下方绝对放置一些东西 - 使用较低的 z-index。

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

This article 深入探讨了这项技术。

【讨论】：

【解决方案2】：

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

例如：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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

【讨论】：