javascript 所有浏览器的文件输入按钮，这可能吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5191375/
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
A file input button for all browsers, is this possible?
提问by Christian Fazzini
Is it possible to use uploadifyto allow any user to select a file from the file dialogue and insert it into the file input element of a form? I only need to use uploadify as a way to style the "upload button" as an image.
是否可以使用uploadify来允许任何用户从文件对话框中选择一个文件并将其插入到表单的文件输入元素中？我只需要使用 uploadify 作为将“上传按钮”设置为图像的一种方式。
I have tried other approaches here, hereand here. All are not compatible with all browsers.
What else can I use / do to have my file input element as an image?
我还可以使用/做些什么来将我的文件输入元素作为图像？
I would like to have my file input button to look consistent in all browsers.
我想让我的文件输入按钮在所有浏览器中看起来都一致。
回答by Atanas Korchev
I can't remember the source of the technique but thisseems to be cross-browser. Tested in:
我不记得该技术的来源，但这个似乎是跨浏览器。测试于：
- Google Chrome 9
- FireFox 3.6
- Internet Explorer 6-9
- Opera 10
- Safari for Windows
- 谷歌浏览器 9
- 火狐 3.6
- Internet Explorer 6-9
- 歌剧10
- Windows 版 Safari
Here is the complete code:
这是完整的代码：
HTML:
HTML：
<div>
<button><!-- this is skinnable -->Pick a file ...</button>
<input type="file" />
</div>
CSS:
CSS：
div
{
position:relative;
width: 100px;
height: 30px;
overflow:hidden;
}
div button
{
position: absolute;
width: 100%;
height: 100%;
}
div input
{
font: 500px monospace; /* make the input's button HUGE */
opacity:0; /* this will make it transparent */
filter: alpha(opacity=0); /* transparency for Internet Explorer */
position: absolute; /* making it absolute with z-index:1 will place it on top of the button */
z-index: 1;
top:0;
right:0;
padding:0;
margin: 0;
}
The idea is to make the <input type="file" />transparent and place it on top of some style-able content (a <button>in this case). When the end user clicks the button she will actually click the <input type="file" />.
这个想法是使<input type="file" />透明并将其放置在一些可设置样式的内容（<button>在本例中为 a）之上。当最终用户单击按钮时，她实际上会单击<input type="file" />.
回答by kraken
The simple way to use a "label" tag and "for" property. Like this http://jsfiddle.net/Txrs6/but in this case we don't see a chosen file. CODE
使用“label”标签和“for”属性的简单方法。像这样http://jsfiddle.net/Txrs6/但在这种情况下，我们没有看到选定的文件。代码
<label for="inputFile" class="col-sm-3" style="padding-left: 0px;"><a class="btn btn-info">Выбрать...</a></label>`
<input style="display: none;" type="file" id="inputFile">
Another way with js http://jsfiddle.net/PZ5Ep/
js的另一种方式http://jsfiddle.net/PZ5Ep/
回答by JohnP
Your best bet in that case would be to use a flash uploader. This would introduce a complete separate control and would have no dependency on the browser. There are plenty of them on the net. Here's one : http://swfupload.org/
在这种情况下，您最好的选择是使用 Flash 上传器。这将引入一个完整的独立控件，并且不依赖于浏览器。网上有很多。这是一个：http: //swfupload.org/
回答by picardo
If it's only the upload button you want to style, why can't you use CSS? That should work across all browsers.
如果只是上传按钮要设置样式，为什么不能使用 CSS？这应该适用于所有浏览器。
If you put your code on jsFiddle, I can tell you more about what you can do.
如果你把你的代码放在 jsFiddle 上，我可以告诉你更多关于你能做什么的信息。
