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 相关文章推荐
js过滤数组重复元素的方法
Sep 05 Javascript
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 Javascript
jQuery中:checkbox选择器用法实例
Jan 03 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
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
PHP中PDO的错误处理
2011/09/04 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
使用jquery实现简单的ajax
2013/07/08 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
Python中的字符串查找操作方法总结
2016/06/27 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
欧舒丹英国官网:购买欧舒丹护手霜等明星产品
2017/01/17 全球购物
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
银行出纳岗位职责
2013/11/25 职场文书
服务质量承诺书
2014/03/27 职场文书
战友聚会主持词
2014/04/02 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
党员评议思想汇报
2014/10/08 职场文书
死亡证明书样本说明
2014/10/18 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
MYSQL 运算符总结
2021/11/11 MySQL