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

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

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

本文深入探讨了该技术。

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

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

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

浏览器真的不喜欢你弄乱文件输入，但这是可能的。我见过几种技术，但最简单的方法是将文件输入绝对放置在要用作按钮的任何内容上，并将其不透明度设置为零或接近零。这意味着，当用户点击图片（或图片下方的任何内容）时，他们实际上是在点击不可见的浏览按钮。

例如：

<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

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