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 相关文章推荐
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
js实现一键复制功能
Mar 16 Javascript
详解用vue编写弹出框组件
Jul 04 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 Javascript
node使用request请求的方法
Dec 20 Javascript
何时使用Map来代替普通的JS对象
Apr 29 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中文件缓存转内存缓存的方法
2011/12/06 PHP
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
php获取参数的几种方法总结
2014/02/18 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
拖拉表格的JS函数
2008/11/20 Javascript
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
使用jquery获取url及url参数的简单实例
2016/06/14 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
对python中的pop函数和append函数详解
2018/05/04 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
详解python持久化文件读写
2019/04/06 Python
python中正则表达式与模式匹配
2019/05/07 Python
python绘制多个子图的实例
2019/07/07 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
Linux如何压缩可执行文件
2014/03/27 面试题
写好求职信第一句话的技巧
2013/10/26 职场文书
企业宣传口号
2014/06/12 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python