bootstrap中好看的文件上传样式
来源:互联网 发布:寻路中国知乎 编辑:程序博客网 时间:2024/04/30 21:12
一 直接使用bootstrap,利用简单的js控制
http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/
非常简单,代码如下:
效果如下:
不需要任何其他的js和css,只需要引入bootstrap和jQuery即可
其实这个就是拼接出来的,然后js控制显示文件名。
效果如下:
二 bootstrap-filestyle
http://markusslima.github.io/bootstrap-filestyle/
注意:此样式只能使用bootstrap2的css,版本为bootstrap3的css是不兼容的!!(妈蛋我就因为这个测试了老半天。。摔
效果如下:
三 bootstrap-file-input
http://www.gregpike.net/demos/bootstrap-file-input/demo.html
引入了bootstrap.file-input.js但是直接引入有点小问题,说找不到bootstrapFileInput这个方法。于是我就改了一点js:
好了,到了看效果的时候啦~~
四 Fine Uploader
http://fineuploader.com/demos.html
在官网下载是收费的。。我在github下载了一个。
下载链接
下载解压后是这样的:
js和css,你们在文件夹里搜索就能找到,但是有一个all.fineuploader-4.3.1.min.js,是我在官网用chrome审查元素copy下来的。。经测试可以用注意中间代码中的Template
如果没有这一段,console将会报错:
然后我查到一个原因:
大家可以阅读下,就是必须要有一个模板文件才可以运行。
效果如下:(没导css对应的图片有点丑)
五 其他
http://www.cnblogs.com/lhb25/p/form-enhanced-with-javascript-five.html
这个网页里还推荐了其他几款比较不错的。
jQuery File Uploader
DropZoneJS
Uploadify
FineUploader
- bootstrap中好看的文件上传样式
- bootstrap中好看的文件上传样式
- bootstrap中好看的文件上传样式(持续更新中)
- bootstrap中好看的文件上传样式(持续更新中)
- 好看的按钮样式
- 好看的文本框样式
- 好看的文本框样式
- 好看的文本框样式
- 好看的按钮样式
- 好看的表单样式
- 好看的分页样式
- 好看的文本框样式:
- wpf 中 收集的 button 好看的样式
- listview中好看的分割线的样式有哪些?
- 【Bootstrap】本地css样式放置的位置,以及jsp文件中如何引用样式
- 几个好看的button样式
- 几个好看的button样式
- 几个好看的button样式
- 蓝牙学习一
- Mac OS X(10.10) 环境变量
- 基于OpenCV的简单的数字识别的例程
- matlab 函数
- jdbc面试题
- bootstrap中好看的文件上传样式
- VBA中窗体模块、标准模块和类模块的区别
- UIImage加载图片的方法及imageNamed和imageWithContentsOfFile的区别
- 生命游戏
- 将一个键盘输入的数字转化成中文输出
- 安卓开发异常rx.exceptions.OnErrorNotImplementedException: Must be called from main thread of fragment host
- Android监听的软键盘的状态
- php清除页面别人挂的马
- 用ul、li做横向导航