Input TYPE="File" 隐藏输入并离开按钮？答案

【问题标题】：Input TYPE="File" hide the input and leave the button?Input TYPE="File" 隐藏输入并离开按钮？
【发布时间】：2011-09-13 01:09:31
【问题描述】：

有谁知道如何隐藏input type="file" 中的输入并留下按钮？

这可能吗？

【问题讨论】：

input type=file show only button 的可能重复项

标签： html css

【解决方案1】：

从历史上看，文件输入一直是 HTML 样式的一个难题。但是，有一些解决方法。看一下a jQuery plugin，它用一些自定义元素掩盖了输入。设计和自定义这些元素要容易得多。

This 也是一篇关于这个主题的好文章。

【讨论】：

【解决方案2】：

AFAIK 这是不可能的。这里是some techniques 设置该字段的样式，隐藏原始字段并将其替换为一些标准输入，然后使用 javascript 来反映原始字段。

【讨论】：

【解决方案3】：

使用剪辑属性。需要绝对定位，所以添加一个相对定位的容器。

input[type="file"] { outline: none; cursor: pointer; position: absolute; top:0; clip: rect(0px 222px 22px 145px);  }

Webkit 浏览器需要不同的坐标：

* > /**/ input[type="file"], x:-webkit-any-link { outline: none; cursor: pointer; position: absolute; top:0; clip: rect(0px 86px 22px 0px);  }

【讨论】：

【解决方案4】：

<script type="text/javascript">
    $(function () {
        $('#btn-upload').click(function (e) {
            e.preventDefault();
            $('#file').click();
        });
    });
</script>

<style type="text/css">
    #file { display:none; } 
</style>

<div>
    <input type="file" id="file" name="file" />
    <button type="button" id="btn-upload">Image</button>
</div>

【讨论】：