bootstrap fileinput完整实例分享


Posted in Javascript onNovember 08, 2016

本篇介绍如何使用bootstrap fileinput.js,file input插件功能如此强大,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,最好用的文件上传组件。

文件夹结构

bootstrap fileinput完整实例分享

版本都是3.x

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title> New Document </title>
 <meta name="Generator" content="EditPlus">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <link href="bootstrap-3.3.5/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-fileinput-master/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="jquery-2.1.1.min.js"></script>x
<script src="bootstrap-fileinput-master/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script>
<script src="bootstrap-fileinput-master/js/fileinput.min.js"></script>
<script src="bootstrap-3.3.5/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="bootstrap-fileinput-master/js/fileinput_locale_zh.js"></script>
 </head>

 <body>
<form>
 <div class="" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
 <div class="modal-dialog modal-lg" role="document">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
 <h4 class="modal-title" id="myModalLabel">请选择Excel文件</h4>
 </div>
 <div class="modal-body">
 <a href="~/Data/ExcelTemplate/Order.xlsx" class="form-control" style="border:none;">下载导入模板</a>
 <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" />
 </div></div>
 </div>
 </div>
</form>
 </body>
</html>

<script>
$(function () {
 //0.初始化fileinput
 var oFileInput = new FileInput();
 oFileInput.Init("txt_file", "/api/OrderApi/ImportOrder");
});



//初始化fileinput
var FileInput = function () {
 var oFile = new Object();

 //初始化fileinput控件(第一次初始化)
 oFile.Init = function(ctrlName, uploadUrl) {
 var control = $('#' + ctrlName);

 //初始化上传控件的样式
 control.fileinput({
 language: 'zh', //设置语言
 uploadUrl: uploadUrl, //上传的地址
 allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
 showUpload: true, //是否显示上传按钮
 showCaption: false,//是否显示标题
 browseClass: "btn btn-primary", //按钮样式 
 //dropZoneEnabled: false,//是否显示拖拽区域
 //minImageWidth: 50, //图片的最小宽度
 //minImageHeight: 50,//图片的最小高度
 //maxImageWidth: 1000,//图片的最大宽度
 //maxImageHeight: 1000,//图片的最大高度
 //maxFileSize: 0,//单位为kb,如果为0表示不限制文件大小
 //minFileCount: 0,
 maxFileCount: 10, //表示允许同时上传的最大文件个数
 enctype: 'multipart/form-data',
 validateInitialCount:true,
 previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
 msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
 });

 //导入文件上传完成之后的事件
 $("#txt_file").on("fileuploaded", function (event, data, previewId, index) {
 $("#myModal").modal("hide");
 var data = data.response.lstOrderImport;
 if (data == undefined) {
 toastr.error('文件格式类型不正确');
 return;
 }
 //1.初始化表格
 var oTable = new TableInit();
 oTable.Init(data);
 $("#div_startimport").show();
 });
}
 return oFile;
};
</script>

知识只有共享才能传播,才能推崇出新的知识,才能学到更多,这里写的每一篇文字/博客,基本都是从网上查询了一下资料然后记录下来,也有些是原滋原味搬了过来,也有时加了一些自己的想法,希望大家喜欢。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
通过url查找a元素并点击
Apr 09 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
原生js页面滚动延迟加载图片
Dec 20 Javascript
JavaScript学习笔记之数组随机排序
Mar 23 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
JS+CSS实现滚动数字时钟效果
Dec 25 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
Dec 05 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
vue自定义指令之面板拖拽的实现
Apr 14 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 #Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 #Javascript
Javascript数组循环遍历之forEach详解
Nov 07 #Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 #Javascript
jQuery webuploader分片上传大文件
Nov 07 #Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 #Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 #Javascript
You might like
一个简易需要注册的留言版程序
2006/10/09 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
jQuery timers计时器简单应用说明
2010/10/28 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
js判断一个元素是否为另一个元素的子元素的代码
2012/03/21 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
python的mysqldb安装步骤详解
2017/08/14 Python
详解K-means算法在Python中的实现
2017/12/05 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
python logging 日志的级别调整方式
2020/02/21 Python
python 调整图片亮度的示例
2020/12/03 Python
小学生获奖感言范文
2014/02/02 职场文书
幼儿园毕业教师感言
2014/02/21 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
四风批评与自我批评范文
2014/10/14 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android