github:https://github.com/zhangkaitao/bootstrap-file-inputcss
为bootstrap提供统一的文件上传按钮
试用了几个相似的,不能知足需求,干脆本身写一个。
思路是:利用label完成辅助点击file框,并把file框设置为透明便可,很是简单
可完美解决在ie中的“访问限制”问题(即必须是用户点击才能进行文件上传),且无位置偏移问题。html
使用方式
导入js和css便可,会自动查找file标签执行初始化jquery
<script src="./js/bootstrap.file-input.js"></script> <link href="./css/bootstrap.file-input.css" rel="stylesheet">
效果
其余参考:
一、http://gregpike.net/demos/bootstrap-file-input/demo.html
确点:ie8(其余版本未测试)下,可能在使用过程当中input位置有误差
二、http://addyosmani.github.com/jquery-ui-bootstrap/extra.html#file-input
这个是jquery-ui-bootstrap的参考示例,确点也是ie的限制git
因此你们能够根据个人思路改写这两个。github
github:https://github.com/zhangkaitao/bootstrap-file-inputbootstrap