本文作者:佚名

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
转载或复制请以超链接形式并注明出处唯福建站

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

支付宝扫一扫打赏

微信扫一扫打赏