但行好事,莫问前程

挖了太多坑,一点点填回来

BootStrap 的文件上传控件

bootstrap, js

input[type=file] 的这个控件,在不同的浏览器上表现出的样式不同,尤其是在 Chrome 上,完全和 FF 、IE 的天差地别。为了让这个控件在不同的浏览器表现出统一的样式,需要有一个优秀的解决方案。

周末在家里做东西的时候,由于后台使用了 BootStrap 来做,于是就想找一个类似的插件来修改,在 Google 上搜了一下,找到了下面这个插件:

http://markusslima.github.io/bootstrap-filestyle/

导入该插件的库文件之后,

1
<script type="text/javascript" src="js/bootstrap-filestyle.min.js"></script>

配置起来异常简单:

1
$(":file").filestyle();

当然如果只是想为单个控件做样式修改的话,可以通过 HTML5 的 data API 来完成:

1
<input type="file" class="filestyle" data-classButton="btn btn-primary" data-input="false">

这个插件还有一些配置选项和 API 可以满足各种定制,具体的内容可以查看源文档。

BootStrap 真是好东西,但是用多了之后,会不会有审美疲劳?

Have a nice day!