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

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

解决方案

最好的方法是使文件输入控件几乎不可见(通过给它一个非常低的不透明度，不要执行"可见性：隐藏"或者"显示：无")，并以较低的z-index绝对定位某些内容。

这样，实际的控件将是不可见的，并且放置在它下面的任何内容都将显示出来。但是由于控件位于该按钮上方，所以它仍将捕获单击事件(这就是为什么要使用不透明度而不是可见性，或者如果我们使用隐藏元素，显示浏览器会使该元素不可单击)。

本文深入探讨了该技术。

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

但是，有两个变通办法，以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将样式设置的控件放在顶部，然后将clickevent从按钮发送到文件输入。有关技术，请参见此处：http://www.quirksmode.org/dom/inputfile.html

我们也可以使用SWFupload之类的Flash上​​传器来执行此操作。