在 html 中替换文件浏览按钮的最佳方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/108149/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the best way to replace the file browse button in html?
提问by vaske
I know that it's possible to replace the browse button, which is generated in html, when you use inputtag with type="file.
我知道当您使用input带有type="file.
I'm not sure what is the best way, so if someone has experience with this please contribute.
我不确定什么是最好的方法，所以如果有人有这方面的经验，请贡献。
回答by levik
The best way is to make the file input control almostinvisible (by giving it a very low opacity - do not do "visibility: hidden" or "display: none") and absolutely position something under it - with a lower z-index.
最好的方法是让文件输入控件几乎不可见（通过给它一个非常低的不透明度 - 不要做“可见性：隐藏”或“显示：无”）并绝对定位它下面的东西 - 使用较低的z-index。
This way, the actual control will not be visible, and whatever you put under it will show through. But since the control is positioned above that button, it will still capture the click events (this is why you want to use opacity, not visibility or display - browsers make the element unclickable if you use those to hide it).
这样，实际的控件将不可见，您在其下放置的任何内容都会显示出来。但是由于控件位于该按钮上方，它仍然会捕获点击事件（这就是为什么您要使用不透明度，而不是可见性或显示 - 如果您使用它们来隐藏元素，浏览器会使元素不可点击）。
This articlegoes in-depth on the technique.
这篇文章深入介绍了这项技术。
回答by Dan
Browsers don't really like you to mess around with file inputs, but it's possible to do this. I've seen a couple of techniques, but the simplest is to absolutely position the file input over whatever you want to use as a button, and set its opacity to zero or near-zero. This means that when the user clicks on the image (or whatever you have under there) they're actually clicking on the invisible browse button.
浏览器真的不喜欢你乱搞文件输入，但这是可能的。我见过几种技术，但最简单的方法是将文件输入绝对放置在您想用作按钮的任何位置上，并将其不透明度设置为零或接近零。这意味着当用户单击图像（或您在那里的任何内容）时，他们实际上是在单击不可见的浏览按钮。
For example:
例如：
<input type="file" id="fileInput">
<img src="...">
#fileInput{
position: absolute;
opacity: 0;
-moz-opacity: 0;
filter: alpha(opacity=0);
}
回答by erlando
If you don't mind using javascript you can set the opasity of the file-input to 0, place your styled control on top via z-index and send clickevents from your button to the file-input. See here for the technique: http://www.quirksmode.org/dom/inputfile.html
如果您不介意使用 javascript，您可以将文件输入的不透明度设置为 0，通过 z-index 将样式控件放在顶部，并将点击事件从您的按钮发送到文件输入。有关技术，请参见此处：http: //www.quirksmode.org/dom/inputfile.html
回答by ceejayoz
回答by Luke Bennett
This isn't technically possible for security purposes, so the user cannot be misled.
出于安全目的，这在技术上是不可能的，因此不会误导用户。
However, there are a couple of workarounds - take a look at http://www.quirksmode.org/dom/inputfile.htmlfor one example.
但是，有几种解决方法 - 以http://www.quirksmode.org/dom/inputfile.html为例。
For the record, this question has already been asked here(where I gave the same answer).
