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 相关文章推荐
JavaScript 比较时间大小的代码
Apr 24 Javascript
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
vue.config.js常用配置详解
Nov 14 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的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
php筛选不存在的图片资源
2015/04/28 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
jQuery MD5加密实现代码
2010/03/15 Javascript
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
Python中几种操作字符串的方法的介绍
2015/04/09 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
django框架使用方法详解
2019/07/18 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
Python-jenkins模块获取jobs的执行状态操作
2020/05/12 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
英文版销售经理个人求职信
2013/11/20 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
小学生作文评语集锦
2014/12/25 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python