Question

可能重复：
jQuery : simulating a click on a <input type=“file” /> doesn't work in Firefox?

默认情况下，是否可以有一个没有输入的文件按钮？理想情况下，我想要的是一个按钮，让用户可以导航到文件而不显示他们在上传之前选择的内容。在用户选择文件后，我将通过以下内容提交表单：

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

我确信这必须是一些css或jquery魔术......

Answer 1

您可以使用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();
});

这里是小提琴：http://jsfiddle.net/tCzuh/

Answer 2

如果我没记错的话，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;切断多余的部分。这对于绝对巨大的按钮可能不起作用。

Answer 3

可以看一个选项：

http://shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

这样可以更加自定义<input>字段

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

3 个答案: