文件上传按钮没有输入字段？ [英] file upload button without input field?

问题描述

可能重复：

jQuery：模拟点击< input type =" file />在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');
});

我相信这必须是可能的一些css或jquery魔法...

I'm sure this must be possible with some css or jquery magic...

推荐答案

如果我记得正确，HTML5允许你调用点击输入元素通过自定义按钮显示文件对话框（为什么不让它工作没有元素，我不知道）。不幸的是，目前尚未使用的所有浏览器都支持此功能，因此您仍然需要对文件输入进行样式设置，使其看起来像一个按钮。

If I remember correctly, HTML5 allows you to call the click method 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.

这是一个非常丑陋但巧妙的CSS hack我在一个网站上遇到过一次（可能是imgur）：

This is a hilariously ugly but ingenious CSS hack I came across on a site once (probably 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; 切断过量。这可能无法用于绝对巨大的按钮。

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.

这篇关于文件上传按钮没有输入字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！