jQuery 没有输入字段的文件上传按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8350927/
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
file upload button without input field?
提问by Paul
Possible Duplicate:
jQuery : simulating a click on a <input type=“file” /> doesn't work in Firefox?
Is it possible to have a file button without an input beside it by default? Ideally all I want is a button that lets the user navigate to a file without showing what they selected prior to an upload. I'll submit the form by the following after a user chooses a file:
默认情况下，是否可以有一个没有输入的文件按钮？理想情况下，我想要的只是一个按钮，让用户导航到一个文件，而无需显示他们在上传之前选择的内容。在用户选择文件后，我将通过以下方式提交表单：
$("#file").change(function() {
$("#update_button").trigger('click');
});
I'm sure this must be possible with some css or jquery magic...
我确定这一定可以通过一些 css 或 jquery 魔术来实现...
采纳答案by Matti Virkkunen
If I remember correctly, HTML5 allows you to call the clickmethod on a hidden input element to show the file dialog via a custom button (why not just make it work without an element, I don't know). Unfortunately not all currently in use browsers support this yet, so you're stuck with styling a file input to look like a button.
如果我没记错的话，HTML5 允许您click在隐藏的输入元素上调用该方法以通过自定义按钮显示文件对话框（为什么不让它在没有元素的情况下工作，我不知道）。不幸的是，并非所有当前使用的浏览器都支持此功能，因此您不得不将文件输入设置为看起来像按钮。
This is a hilariously ugly but ingenious CSS hack I came across on a site once (probably imgur):
这是我曾经在一个网站上遇到的一个非常丑陋但巧妙的 CSS hack（可能是 imgur）：
.fileupload {
width: 100px;
height: 50px;
position: relative;
overflow: hidden;
background: ...; /* and other things to make it pretty */
}
.fileupload input {
position: absolute;
top: 0;
right: 0; /* not left, because only the right part of the input seems to
be clickable in some browser I can't remember */
cursor: pointer;
opacity: 0.0;
filter: alpha(opacity=0); /* and all the other old opacity stuff you
want to support */
font-size: 300px; /* wtf, but apparently the most reliable way to make
a large part of the input clickable in most browsers */
height: 200px;
}
And the HTML to go with it:
以及与之配套的 HTML：
<div class="fileupload">
<input type="file" />
Any content here, perhaps button text
</div>
What it does is it makes the file input itself enormous (by changing the font size (!?)) to ensure it covers the button, and then cuts off the excess with overflow: hidden;. This may not work for absolutely enormous buttons.
它的作用是使文件输入本身变得巨大（通过更改字体大小（！？））以确保它覆盖按钮，然后用overflow: hidden;. 这可能不适用于绝对巨大的按钮。
回答by Joseph Silber
You could simply hide the inputbutton with visibility: hidden;, and attach a click event handler to the other button:
您可以简单地使用 隐藏input按钮visibility: hidden;，并将单击事件处理程序附加到另一个按钮：
HTML:
HTML：
<input type="file" name="somename" size="chars">
<button>Choose File</button>
CSS:
CSS：
input {
display: block;
visibility: hidden;
width: 0;
height: 0;
}
JavaScript:
JavaScript：
$('button').click(function(){
$('input').click();
});
Here's the fiddle: http://jsfiddle.net/tCzuh/
这是小提琴：http: //jsfiddle.net/tCzuh/
回答by mattlangtree
If you set the opacity to 0, then you can add another div underneath it that looks like a button. You can style this any way you like then.
如果将不透明度设置为 0，则可以在其下方添加另一个看起来像按钮的 div。你可以用任何你喜欢的方式来设计它。
Working code example below:
下面的工作代码示例：
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div class="wrapper">
<div class="fakeuploadbutton">upload</div>
<input id="file" type="file" name="file" />
</div>
<script type="text/javascript" charset="utf-8">
jQuery('#file').css('opacity',0);
</script>
<style type="text/css" media="screen">
.wrapper { position: relative; }
.fakeuploadbutton {
background: red url('myuploadbutton.png') no-repeat top left;
width: 100px; height: 30px;
}
#file {
position: absolute;
top: 0px; left: 0px;
width: 100px; height: 30px;
}
</style>
回答by Jason
An option to look at is here:
一个可以查看的选项在这里：
http://shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
http://shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
This allows for more customization of an <input>field
这允许对<input>字段进行更多自定义
