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 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 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
php eval函数一句话木马代码
2015/05/21 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
javascript深入理解js闭包
2010/07/03 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
用python代码做configure文件
2014/07/20 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
网站设计师的岗位职责
2013/11/21 职场文书
前处理组长岗位职责
2014/03/01 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
小人国观后感
2015/06/11 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
mysql如何配置白名单访问
2021/06/30 MySQL
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python