Bootstrap Fileinput文件上传组件用法详解


Posted in Javascript onMay 10, 2016

最近时间空余,总结了一些关于bootstrap fileinput组件的一些常见用法,特此分享到三水点靠木平台,供大家参考,同时也方便以后的查找。本文写的不好还请见谅。

一、效果展示

1、原始的input type='file',简直不忍直视。

Bootstrap Fileinput文件上传组件用法详解

2、不做任何装饰的bootstrap fileinput:(bootstrap fileinput初级进化)

Bootstrap Fileinput文件上传组件用法详解

Bootstrap Fileinput文件上传组件用法详解

3、bootstrap fileinput高级进化:中文化、可拖拽上传、文件扩展名校验(如果不是需要的文件,不让上传)

Bootstrap Fileinput文件上传组件用法详解

Bootstrap Fileinput文件上传组件用法详解

拖拽上传

Bootstrap Fileinput文件上传组件用法详解

上传中

Bootstrap Fileinput文件上传组件用法详解

Bootstrap Fileinput文件上传组件用法详解

4、bootstrap fileinput究极进化:允许同时多线程上传多个文件。

Bootstrap Fileinput文件上传组件用法详解

上传中

Bootstrap Fileinput文件上传组件用法详解

上传完成后

Bootstrap Fileinput文件上传组件用法详解

二、代码示例

怎么样?效果如何?不要急,我们一步一步来实现以上的效果。

1、cshtml页面

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

//bootstrap fileinput
bundles.Add(new ScriptBundle("~/Content/bootstrap-fileinput/js").Include(
"~/Content/bootstrap-fileinput/js/fileinput.min.js",
"~/Content/bootstrap-fileinput/js/fileinput_locale_zh.js"));
bundles.Add(new StyleBundle("~/Content/bootstrap-fileinput/css").Include(
"~/Content/bootstrap-fileinput/css/fileinput.min.css"));
@Scripts.Render("~/Content/bootstrap-fileinput/js")
@Styles.Render("~/Content/bootstrap-fileinput/css")

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

<form>
<div class="modal fade" 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>

重点看这一句:

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

multiple表示允许同时上传多个文件,class=“file-loading”表示标签的样式。

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 Fileinput文件上传组件用法详解

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

(2)$("#txt_file").on("fileuploaded", function (event, data, previewId, index) {}这个方法注册上传完成后的回调事件。也就是后天处理上传的文件之后进入这个方法里面处理。

3、后台C#对应的方法

还记得在js里面初始化控件方法fileinput()里面有一个参数url吗,这个url对应的值就指示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的逻辑,如果是上传图片等文件,可以使用GDI去处理图片。

4、同时上传多个文件

同时上传多个文件的时候,前台会发送多个异步的请求到后台,也就是说,当同时上传三个文件的时候,后台的ImportOrder方法会进入三次。这样就能使用多线程同时去处理三个文件。

三、总结

关于bootstrap fileinput的基础使用大概就介绍完了,其实就是一个上传的组件,也不存在什么高级用法。重点是把界面做得更加友好,更好的增加用户体验。

关于Bootstrap Fileinput文件上传组件用法详解就给大家介绍这么多,希望对大家有所帮助!

Javascript 相关文章推荐
基于Jquery的温度计动画效果
Jun 18 Javascript
jquery中实现标签切换效果的代码
Mar 01 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
详解Element 指令clickoutside源码分析
Feb 15 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
Jul 10 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
javascript实现的猜数小游戏完整实例代码
May 10 #Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 #Javascript
全国省市二级联动下拉菜单 js版
May 10 #Javascript
js实现的简单图片浮动效果完整实例
May 10 #Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 #Javascript
jQuery选择器基础入门教程
May 10 #Javascript
jquery实现图片上传前本地预览功能
May 10 #Javascript
You might like
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
php过滤敏感词的示例
2014/03/31 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
javascript arguments使用示例
2014/12/16 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
使用PDB模式调试Python程序介绍
2015/04/05 Python
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
python修改操作系统时间的方法
2015/05/18 Python
Python统计单词出现的次数
2018/04/04 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
pytorch数据预处理错误的解决
2020/02/20 Python
Python定义函数实现累计求和操作
2020/05/03 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
继承权公证书
2014/04/09 职场文书
某某同志考察材料
2014/05/28 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书