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


Posted in Javascript onMay 10, 2016

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

http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/

非常简单,代码如下:

<input id="lefile" type="file" style="display:none"> 
<div class="input-append"> 
<input id="photoCover" class="input-large" type="text" style="height:30px;"> 
<a class="btn" onclick="$('input[id=lefile]').click();">Browse</a> 
</div> 
<script type="text/javascript"> 
$('input[id=lefile]').change(function() { 
$('#photoCover').val($(this).val()); 
}); 
</script>

效果如下:

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

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

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

效果如下:

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

二 bootstrap-filestyle

http://markusslima.github.io/bootstrap-filestyle/

注意:此样式只能使用bootstrap2的css,版本为bootstrap3的css是不兼容的!!(妈蛋我就因为这个测试了老半天。。摔

效果如下:

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

三 bootstrap-file-input

http://www.gregpike.net/demos/bootstrap-file-input/demo.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>bootstrap.file-input</title> 
<link href="css/bootstrap.min.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<script type="text/javascript" src="js/bootstrap.file-input.js"></script> 
</head> 
<body> 
<!-- Change the wording using a title tag --> 
<input type="file" title="Search for a file to add 1" class="btn-primary"> 
<br> 
<br> 
<input type="file" title="Search for a file to add 2" class="btn btn-primary"> 
<br> 
<br> 
<input type="file" title="Search for a file to add 3" class="btn-primary"> 
<br> 
<br> 
<input type="file" title="Search for a file to add 4" class="btn-primary"> 
<br> 
<br> 
<br> 
<br> 
<br> 
Disable the styling: 
<!-- Disable the styling --> 
<input type="file" data-bfi-disabled> 
<script type="text/javascript"> 
$('input[type=file]').bootstrapFileInput(); 
</script> 
</body> 
</html>

引入了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 
<input type="file"> 
into Bootstrap buttons 
<a class="btn">Browse</a> 
*/ 
$.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 = '<style>'+ 
'.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; }'+ 
'</style>'; 
$('link[rel=stylesheet]').eq(0).before(cssHtml); 
};

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

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

四 Fine Uploader

http://fineuploader.com/demos.html

在官网下载是收费的。。我在github下载了一个。

下载链接

下载解压后是这样的:

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

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>bootstrap.file-input</title> 
<link href="css/bootstrap.min.css" rel="stylesheet" /> 
<link href="css/fineuploader.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<script type="text/javascript" src="js/all.fineuploader-4.3.1.min.js"></script> 
</head> 
<body> 
<br> 
<div id="manual-fine-uploader"></div> 
<div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;"> 
<i class="icon-upload icon-white"></i> Upload now 
</div> 
<script> 
$(document).ready(function() { 
var manualuploader = $('#manual-fine-uploader').fineUploader({ 
request: { 
endpoint: 'server/handleUploads' 
}, 
autoUpload: false, 
text: { 
uploadButton: '<i class="icon-plus icon-white"></i> Select Files' 
} 
}); 
$('#triggerUpload').click(function() { 
manualuploader.fineUploader('uploadStoredFiles'); 
}); 
}); 
</script> 
<script> 
$(document).ready(function () { 
$('#fine-uploader').fineUploader({ 
request: { 
endpoint: 'server/handleUploads' 
} 
}); 
}); 
</script> 
<!-- Fine Uploader CSS 
====================================================================== --> 
<!-- Fine Uploader DOM Element 
====================================================================== --> 
<div id="fine-uploader"></div> 
<!-- Fine Uploader template 
====================================================================== --> 
<script type="text/template" id="qq-template"> 
<div class="qq-uploader-selector qq-uploader"> 
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone> 
<span>Drop files here to upload</span> 
</div> 
<div class="qq-upload-button-selector qq-upload-button"> 
<div>Upload a file</div> 
</div> 
<span class="qq-drop-processing-selector qq-drop-processing"> 
<span>Processing dropped files...</span> 
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span> 
</span> 
<ul class="qq-upload-list-selector qq-upload-list"> 
<li> 
<div class="qq-progress-bar-container-selector"> 
<div class="qq-progress-bar-selector qq-progress-bar"></div> 
</div> 
<span class="qq-upload-spinner-selector qq-upload-spinner"></span> 
<span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span> 
<span class="qq-upload-file-selector qq-upload-file"></span> 
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text"> 
<span class="qq-upload-size-selector qq-upload-size"></span> 
<a class="qq-upload-cancel-selector qq-upload-cancel" href="#">Cancel</a> 
<a class="qq-upload-retry-selector qq-upload-retry" href="#">Retry</a> 
<a class="qq-upload-delete-selector qq-upload-delete" href="#">Delete</a> 
<span class="qq-upload-status-text-selector qq-upload-status-text"></span> 
</li> 
</ul> 
</div> 
</script> 
</body> 
</html>

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

注意中间代码中的Template

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

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

然后我查到一个原因:

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

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

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

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

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

Javascript 相关文章推荐
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
浅谈JavaScript的计时器对象
Dec 26 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 Javascript
JavaScript 原型与原型链详情
Nov 02 Javascript
全国省市二级联动下拉菜单 js版
May 10 #Javascript
js实现的简单图片浮动效果完整实例
May 10 #Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 #Javascript
jQuery选择器基础入门教程
May 10 #Javascript
jquery实现图片上传前本地预览功能
May 10 #Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
May 10 #Javascript
基于jquery实现三级下拉菜单
May 10 #Javascript
You might like
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
vue.js中created方法作用
2018/03/30 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
Python的randrange()方法使用教程
2015/05/15 Python
python将ansible配置转为json格式实例代码
2017/05/15 Python
python制作小说爬虫实录
2017/08/14 Python
Flask之flask-session的具体使用
2018/07/26 Python
Python实现全排列的打印
2018/08/18 Python
python学生信息管理系统(初级版)
2018/10/17 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
Python datetime模块使用方法小结
2020/06/18 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
应届毕业生的个人自我鉴定
2013/10/24 职场文书
招标授权委托书样本
2014/09/23 职场文书
个人委托书范本汇总
2014/10/01 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
MySQL七种JOIN类型小结
2021/10/24 MySQL