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 无法通过W3C验证的处理方法
Mar 09 Javascript
jQuery代码优化之基本事件
Nov 01 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
JavaScript基于ajax编辑信息用法实例
Jul 15 Javascript
Bootstrap每天必学之js插件
Nov 30 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 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 版本]
2007/03/20 PHP
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
ajax请求get与post的区别总结
2013/11/04 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
python实现bucket排序算法实例分析
2015/05/04 Python
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
python实现字符串加密成纯数字
2019/03/19 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
乐观大学生的自我评价
2014/01/10 职场文书
优秀教师主要事迹
2014/02/01 职场文书
超市国庆节促销方案
2014/02/20 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
病危通知书样本
2015/04/17 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
拙作再改《我的收音机情缘》
2022/04/05 无线电