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 相关文章推荐
广告显示判断
Aug 31 Javascript
firefox下frameset取不到值的解决方法
Sep 06 Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
Nov 17 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
基于vue实现多引擎搜索及关键字提示
Mar 16 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
vue-cli2.9.3 详细教程
Apr 23 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 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
德生1994机评
2021/03/02 无线电
PHP新手上路(十一)
2006/10/09 PHP
PHP 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
js 处理URL实用技巧
2010/11/23 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
jQuery解析json格式数据示例
2018/09/01 jQuery
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
python基础教程之循环介绍
2014/08/29 Python
matplotlib绘制动画代码示例
2018/01/02 Python
使用python实现BLAST
2018/02/12 Python
python requests post多层字典的方法
2018/12/27 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
如何保障Web服务器安全
2014/05/05 面试题
nohup的用法
2014/08/10 面试题
华为python面试题
2016/05/03 面试题
酒店执行总经理岗位职责
2013/12/15 职场文书
二人合伙经营协议书
2014/09/13 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
语文复习计划
2015/01/19 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书
Python并发编程实例教程之线程的玩法
2021/06/20 Python