论坛首页 Web前端技术论坛

bootstrap-file-input

浏览 20185 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (1) :: 隐藏帖 (0)
作者 正文
   发表时间:2013-03-01  

 

github:https://github.com/zhangkaitao/bootstrap-file-input

 

为bootstrap提供统一的文件上传按钮

试用了几个类似的,不能满足需求,干脆自己写一个。
思路是:利用label完成辅助点击file框,并把file框设置为透明即可,非常简单
可完美解决在ie中的“访问限制”问题(即必须是用户点击才能进行文件上传),且无位置偏移问题。

使用方式

导入js和css即可,会自动查找file标签执行初始化

<script src="./js/bootstrap.file-input.js"></script>
<link href="./css/bootstrap.file-input.css" rel="stylesheet">

效果

Test XIB

其他参考:

1、http://gregpike.net/demos/bootstrap-file-input/demo.html
确点:ie8(其他版本未测试)下,可能在使用过程中input位置有偏差
2、http://addyosmani.github.com/jquery-ui-bootstrap/extra.html#file-input
这个是jquery-ui-bootstrap的参考示例,确点也是ie的限制

所以大家可以根据我的思路改写这两个。

 

github:https://github.com/zhangkaitao/bootstrap-file-input

   发表时间:2013-03-05  
咦,需要输入文件名称?
0 请登录后投票
   发表时间:2013-03-05  
white_crucifix 写道
咦,需要输入文件名称?

不是的 文件名是自定义的名字 跟文件上传可以认为是无关的。
0 请登录后投票
   发表时间:2013-03-06  
呵呵,真巧,昨天也在烦这个bootstrap下文件上传外观的问题。也是找了N个,但都不满意 。今儿个就看到你老放出来了!
0 请登录后投票
   发表时间:2013-03-06  
遗憾的是,文件不能多选 !
0 请登录后投票
   发表时间:2013-03-06   最后修改:2013-03-06
freezingsky 写道
遗憾的是,文件不能多选 !

多选的我这也有
我是基于http://blueimp.github.com/jQuery-File-Upload/ 改的,
可以到我的github参考下;只是目前没有文档,文档后续才能补上。
地址是:
https://github.com/zhangkaitao/es/blob/master/web/src/main/webapp/WEB-INF/jsp/showcase/upload/ajax/uploadForm.jsp

--->>>
你的意思是弹出窗口多选,这个好像默认不行吧,得用flash吧。 或者采用http://blueimp.github.com/jQuery-File-Upload/ 拖拽方式
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics