jquery – 文件上传按钮没有输入字段?

前端之家收集整理的这篇文章主要介绍了jquery – 文件上传按钮没有输入字段?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Possible Duplicate:
07000

默认情况下,是否可以在其旁边添加一个没有输入文件文件按钮?理想情况下,我想要的是一个按钮,可以让用户导航到一个文件,而不会在上传之前显示他们选择的内容用户选择文件后,我将提交以下表单:

$("#file").change(function() {
    $("#update_button").trigger('click');
});

我肯定这可能是一些css或jquery魔术…

解决方法

如果我记得正确,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;这对于绝对巨大的按钮可能无效。

猜你在找的jQuery相关文章