没有输入字段的文件上载按钮？
没有输入字段的文件上载按钮？
提问于 2011-12-02 10:08:09
可能重复：
jQuery : simulating a click on a doesn't work in Firefox?
有没有可能在默认情况下有一个没有输入的文件按钮？理想情况下，我想要的是一个按钮，让用户导航到一个文件，而不显示他们在上传之前选择了什么。在用户选择文件后，我将通过以下方式提交表单：
$("#file").change(function() {
$("#update_button").trigger('click');
});我相信这一定是通过css或jquery的魔法实现的……
回答 4
Stack Overflow用户
回答已采纳
发布于 2011-12-02 10:13:23
如果我没记错的话，HTML5允许您在隐藏的输入元素上调用click方法，以通过自定义按钮显示文件对话框(为什么不在没有元素的情况下让它工作，我不知道)。不幸的是，并不是所有当前使用的浏览器都支持这一点，所以你不得不将文件输入的样式设置为一个按钮。
这是我在一个网站上遇到的一个非常丑陋但巧妙的CSS技巧(可能是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;
}以及与之配套的HTML：
<div class="fileupload">
<input type="file" />
Any content here, perhaps button text
</div>它所做的是使文件输入本身变得巨大(通过更改字体大小(!?))以确保它覆盖按钮，然后用overflow: hidden;剪掉多余的部分。这可能不适用于绝对巨大的按钮。
Stack Overflow用户
发布于 2011-12-02 10:17:20
您可以使用visibility: hidden;简单地隐藏input按钮，并将一个单击事件处理程序附加到另一个按钮：
HTML：
<input type="file" name="somename" size="chars">
<button>Choose File</button>CSS:
input {
display: block;
visibility: hidden;
width: 0;
height: 0;
}JavaScript:
$('button').click(function(){
$('input').click();
});这就是问题所在：http://jsfiddle.net/tCzuh/
Stack Overflow用户
发布于 2011-12-02 10:25:37
如果将不透明度设置为0，则可以在其下面添加另一个看起来像按钮的div。你可以用你喜欢的任何方式来设计它。
工作代码示例如下：
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8350927
复制相关文章
相似问题