Bootstrap文件上传组件之bootstrap fileinput


Posted in Javascript onNovember 25, 2016

前言:之前的三篇介绍了下bootstrap的一些常用组件,发现博主对这种扁平化的风格有点着迷了。前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签,效果不忍直视,于是博主下定决心要找一个好看的上传组件换掉它。既然bootstrap开源,那么社区肯定有很多关于它的组件,肯定也有这种常见的上传组件吧。经过一番查找,功夫不负有心人,还是被博主找到了这个组件:bootstrap fileinput。在此记录下,就算做个学习笔记,也给需要使用的朋友提供点方便。

Bootstrap组件系列文章:

bootstrap-fileinput在线API:http://plugins.krajee.com/file-input

bootstrap-fileinput Demo展示:http://plugins.krajee.com/file-basic-usage-demo

1、html页面

首先引入需要的js和css文件。

<link href="~/Content/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet" />
<script src="~/Content/bootstrap-fileinput/js/fileinput.min.js"></script>
<--中文包-->
<script src="~/Content/bootstrap-fileinput/js/fileinput_locale_zh.js"></script>

当然,既然是bootstrap的组件,它肯定需要bootstrap.js的支持。然后需要jquery的支持。

然后定义input type='file'标签

<input type="file" name="txt_file" id="txt_file" multiple class="file-loading" />

multiple表示允许同时上传多个文件,class=“file-loading”表示标签的样式。这里很重要,如果class="file",则中文化不能生效。

2、js初始化

$(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;
};

说明:

(1)fileinput()方法里面传入的是一个json数据,它里面有很多属性,每个属性代表着初始化上传控件的时候的特性,如果这些属性都不设置,则表示使用默认的设置。如果园友们想看看它里面有哪些属性,可以打开fileinput.js的源码,在它的最后如图:

Bootstrap文件上传组件之bootstrap fileinput

这些属性如果不特意设置,就会使用默认值。

(2)$("#txt_file").on("fileuploaded", function (event, data, previewId, index) {}这个方法注册上传完成后的回调事件。也就是后台处理上传的文件之后会进到这个方法里面。经过以上简单的初始化,就可以得到上述示例图片中的效果。

3、后台对应的方法

还记得在js里面初始化控件方法fileinput()里面有一个参数url吗,这个url对应的值就指示后台对应的处理方法,还是贴出后台的处理方法。(以下为C#示例,如果你的后台语言不是C#,可以定义自己的后台方法)

[ActionName("ImportOrder")]
public object ImportOrder()
{
var oFile = HttpContext.Current.Request.Files["txt_file"];
var lstOrderImport = new List<DTO_TO_ORDER_IMPORT>();
#region 0.数据准备
var lstExistOrder = orderManager.Find();
var lstOrderNo = lstExistOrder.Select(x => x.ORDER_NO).ToList();
var lstTmModel = modelManager.Find();
var lstTmMaterial = materialManager.Find();
//var iMax_Import_Index = lstExistOrder.Max(x => x.IMPORT_INDEX);
//iMax_Import_Index = iMax_Import_Index == null ? 0 : iMax_Import_Index.Value;
#endregion
#region 1.通过Stream得到Workbook对象
IWorkbook workbook = null;
if (oFile.FileName.EndsWith(".xls"))
{
workbook = new HSSFWorkbook(oFile.InputStream);
}
else if(oFile.FileName.EndsWith(".xlsx"))
{
workbook = new XSSFWorkbook(oFile.InputStream);
}
if (workbook == null)
{
return new { };
}
//...............处理excel的逻辑
//orderManager.Add(lstOrder);
lstOrderImport = lstOrderImport.OrderBy(x => x.IMPORT_STATU).ToList();
return new { lstOrderImport = lstOrderImport };
}

由于博主的项目是上传excel,所以这里用的是NPOI处理Excel的逻辑,如果是上传图片等文件,可以使用GDI去处理图片。

4、同时上传多个文件

同时上传多个文件的时候,前台会发送多个异步的请求到后台,也就是说,当同时上传三个文件的时候,后台的ImportOrder方法会进入三次。这样就能使用多线程同时去处理三个文件。这个博主就不做示例了,有兴趣的朋友可以自行研究下。

三、总结

关于bootstrap fileinput的基础使用大概就介绍完了,其实就是一个上传的组件,也不存在什么高级用法。重点是把界面做得更加友好,更好的增加用户体验。需要说明的是,组件对IE浏览器的要求比较高,应该最少要IE9以上,还有就是拖拽上传功能在IE浏览器的体验不太好。

如果你的项目也需要文件上传,不妨试试这个,需要测试Demo或者有什么问题可以随时联系博主。当然如果你觉得本文对你有帮助,可以打赏博主,也可以点赞以资鼓励。不管是物资奖励还是精神支持,都是对博主分享精神的肯定,博主一定继续努力。

Javascript 相关文章推荐
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
ES6正则表达式扩展笔记
Jul 25 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 Javascript
Bootstrap基本布局实现方法详解
Nov 25 #Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 #Javascript
Bootstrap栅格系统学习笔记
Nov 25 #Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 #Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 #Javascript
javaScript语法总结
Nov 25 #Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 #Javascript
You might like
Yii控制器中操作视图js的方法
2016/07/04 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
js获取当前页面路径示例讲解
2014/01/08 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
2016/10/15 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
python发布模块的步骤分享
2014/02/21 Python
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
Python实现处理管道的方法
2015/06/04 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
python爬取各类文档方法归类汇总
2018/03/22 Python
numpy返回array中元素的index方法
2018/06/27 Python
python字典改变value值方法总结
2019/06/21 Python
python画微信表情符的实例代码
2019/10/09 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
介绍一下linux的文件权限
2014/07/20 面试题
自我评价怎么写正确呢?
2013/12/02 职场文书
2014年开学第一课活动方案
2014/03/06 职场文书
2014春晚主持词
2014/03/25 职场文书
三八节标语
2014/06/27 职场文书
ktv好的活动方案
2014/08/15 职场文书
检讨书范文1000字
2015/01/28 职场文书
《青山不老》教学反思
2016/02/22 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
浅析Python实现DFA算法
2021/06/26 Python
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers