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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (98)

默认情况下,是否可以在没有输入的情况下拥有一个文件按钮?我按以下方式提交表单:

$("#file").change(function() {
    $("#update_button").trigger('click');
});
提问于
用户回答回答于

这是一个巧妙的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;
}

和HTML一起执行:

<div class="fileupload">
  <input type="file" />
  Any content here, perhaps button text
</div>
用户回答回答于

你可以简单地隐藏input按钮visibility: hidden;,并将单击事件处理程序附加到另一个按钮:

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();
});

所属标签

可能回答问题的人

  • 腾讯云数据库 TencentDB

    腾讯云 · 产品团队 (已认证)

    301 粉丝2 提问51 回答
  • EatRice

    17 粉丝0 提问175 回答
  • 华讯云

    1 粉丝0 提问151 回答
  • 成都加米谷大数据

    11 粉丝0 提问16 回答

扫码关注云+社区

领取腾讯云代金券