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