本文作者:佚名

BootStrap文件上传样式超好看【持续更新】_javascript技巧

佚名 2019-05-04 ???
摘要:一 直接使用bootstrap,利用简单的js控制type="file" > Browse 效果如下:二 bootstrap-filestyle >


一 直接使用bootstrap,利用简单的js控制


效果如下:


不需要任何其他的js和css,只需要引入bootstrap和jQuery即可

其实这个就是拼接出来的,然后js控制显示文件名。

效果如下:


二 bootstrap-filestyle


三 bootstrap-file-input

html>

引入了bootstrap.file-input.js但是直接引入有点小问题,说找不到bootstrapFileInput这个方法。于是我就改了一点js:

 $.fn.bootstrapFileInput = function() {

 这里我直接用这个方法,把前面一行删掉就可以了 this.each(function(i,elem){

 .........中间省略 // Add the styles be
fore the first stylesheet // This ensures they can be easily overridden with developer styles 
var cssHtml = ''+ '.file-input-wrapper {

 overflow: hidden;
 position: relative;
 cursor: pointer;
 z-index: 1;
 }
'+ '.file-input-wrapper input[type=file], .file-input-wrapper input[type=file]:focus, .file-input-wrapper input[type=file]:hover {

 position: absolute;
 top: 0;
 left: 0;
 cursor: pointer;
 opacity: 0;
 filter: alpha(opacity=0);
 z-index: 99;
 outline: 0;
 }
'+ '.file-input-name {

 margin-left: 8px;
 }
'+ '';
 $('link[rel=stylesheet]').eq(0).be
fore(cssHtml);
 }
;

好了,到了看效果的时候啦~~


四 Fine Uploader


js和css,你们在文件夹里搜索就能找到,但是有一个all.fineuploader-4.3.1.min.js,是我在官网用chrome审查元素copy下来的。。经测试可以用

注意中间代码中的Template

如果没有这一段,console将会报错:

然后我查到一个原因:

大家可以阅读下,就是必须要有一个模板文件才可以运行。

效果如下:(没导css对应的图片有点丑)

以上内容是小编给大家介绍的BootStrap文件上传样式的相关内容,希望对大家有所帮助!

未经允许不得转载:

作者:佚名,标题:BootStrap文件上传样式超好看【持续更新】_javascript技巧,原文地址:https://www.vfjianzhan.com/js/201905/4.html发布于2019-05-04
转载或复制请以超链接形式并注明出处唯福建站

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏