将html中的<input type="file" />(选择文件) 元素隐藏，并通过其它方式触发点击。

标签：

file input的默认外观实在不好看，所以我们要搞定它。。

1. 首先，我们把file input放入一个label，并且将这个label显示为一定的宽高，比如显示为(bootstrap)btn的样式;

2. 为此input增加样式，内联或css文件内写都可以：style="left:-9999px;position:absolute;"

3. 在label内增加文本（作为label btn的显示文本），比如下方示例中的span;

<label id="realBtn" class="btn btn-info">
     <input type="file" id="fileInput1" name="file" class="mFileInput" style="left:-9999px;position:absolute;">
     <span>导入EXCEL数据</span>
</label>

如此即可，无需再添加任何js函数，就能让这个label在被点击时，与file input点击产生同样的效果。这是label标签的一个bug，但是这个bug的通用性极好，连ie7都没问题。

我也查过网上的一些方案，我建议大家不要使用triger等模拟点击的方式触发file input的点击，从安全角度讲，js是不建议这样做的，所以兼容性完全没有保障，再就是，使用透明file input在指定区域悬挂遮盖鼠标的方式，因为要用js处理，所以在性能上会有问题，同时，经我测试，在快速操作时，还是会暴露出一些bug的，很挠头，只有我在本文中所写的方法，才是我认为最上乘的方案，有更好的方案，欢迎大家的指点。

如果需要显示文件名，就在file input的change事件里取它的value就行了。

但是这里就有另一个问题了，就是选择相同的文件不触发change，而且file input的value的清空方法，各浏览器兼容性并不好，但是这个与本贴主题关系不大，我在另一贴中写一写我的解决方法：http://www.cnblogs.com/laozuan/p/4660405.html

将html中的<input type="file" />(选择文件) 元素隐藏，并通过其它方式触发点击。

标签：

原文地址：http://www.cnblogs.com/laozuan/p/4660403.html