一 直接使用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
Disable the styling:
引入了bootstrap.file-input.js但是直接引入有点小问题，说找不到bootstrapFileInput这个方法。于是我就改了一点js：
/* Bootstrap - File Input ====================== This is meant to convert all file input tags into a set of elements that displays consistently in all browsers. Converts all into Bootstrap buttons Browse */ $.fn.bootstrapFileInput = function() { 这里我直接用这个方法，把前面一行删掉就可以了 this.each(function(i,elem){ .........中间省略 // Add the styles before the first stylesheet // This ensures they can be easily overridden with developer styles var cssHtml = ''; $('link[rel=stylesheet]').eq(0).before(cssHtml); };
好了，到了看效果的时候啦~~
四 Fine Uploader
http://fineuploader.com/demos.html
在官网下载是收费的。。我在github下载了一个。
下载解压后是这样的：
bootstrap.file-input
Upload now
js和css，你们在文件夹里搜索就能找到，但是有一个all.fineuploader-4.3.1.min.js，是我在官网用chrome审查元素copy下来的。。经测试可以用
注意中间代码中的Template
如果没有这一段，console将会报错：
然后我查到一个原因：
大家可以阅读下，就是必须要有一个模板文件才可以运行。
效果如下：（没导css对应的图片有点丑）
以上内容是小编给大家介绍的BootStrap文件上传样式的相关内容，希望对大家有所帮助！
Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1
| 本站CDN由 数掘科技 提供
收藏
