没有输入字段的文件上传按钮？ [复制]答案

【问题标题】：file upload button without input field? [duplicate]没有输入字段的文件上传按钮？ [复制]
【发布时间】：2011-12-02 02:08:09
【问题描述】：

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

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

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

我确信这必须通过一些 css 或 jquery 魔法来实现......

【问题讨论】：

标签： jquery html css file-upload

【解决方案1】：

您可以简单地用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/

【讨论】：

这似乎在 Chrome 和 IE 9 上运行良好，但没有更旧的 :(
@Paul - 很有趣。我没有安装任何旧版本的 IE，但是我通过将浏览器模式更改为 IE7 进行了测试，它可以工作！？！
有趣...也许 IE Tester 工作不正常（我不会感到惊讶）我会在这里尝试相同的。谢谢！

【解决方案2】：

如果我没记错的话，HTML5 允许您在隐藏的输入元素上调用 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>

它的作用是使文件输入本身变得巨大（通过更改字体大小（！？））以确保它覆盖按钮，然后用overflow: hidden; 切断多余的部分。这可能不适用于绝对巨大的按钮。

【讨论】：

这是没用的，因为在某些浏览器中文件名在按钮之前，而在其他浏览器中则在按钮之后。见这里：quirksmode.org/dom/pix/filefields.gif
@Dbugger：IIRC Safari 也允许您单击文本部分，许多其他浏览器也是如此。至少 IE 不喜欢点击字段，因此定位正确。我查了一下，这实际上是 imgur.com 所做的，我很确定它们是一个非常好的现场测试。
似乎这些示例中的大多数都适用于旧版浏览器...意思是 IE 8 及以下版本
@Paul：我们已经在 IE 6 及更高版本上测试了这个东西。对你来说够大了吗？
这应该可以工作...我使用的是 IE Tester，但它不适用于 IE 7 和 8，但我想这可能是 IE Tester

【解决方案3】：

如果您将不透明度设置为 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>

【讨论】：

这是解决跨浏览器兼容性问题的最佳方法。

【解决方案4】：

这里有一个选项：

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

这允许对<input> 字段进行更多自定义

【讨论】：