bootstrap fileinput 上传插件的基础使用


Posted in Javascript onFebruary 17, 2017

前言:

之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了。前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签,效果不忍直视,于是博主下定决心要找一个好看的上传组件换掉它。既然bootstrap开源,那么社区肯定有很多关于它的组件,肯定也有这种常见的上传组件吧。经过一番查找,功夫不负有心人,还是被博主找到了这个组件:bootstrap fileinput。关于这个组件的简单应用,基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解,只不过很多细节都没有涉及,于是博主在完成开发任务之余,总结了下这个组件的一些常见用法。在此记录下,就算做个笔记吧,也给需要使用的朋友提供点方便。

源码以及API地址:

bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput

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

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

一、效果展示

 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" rel="external nofollow" 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”表示标签的样式。这里很重要,如果class="file",则中文化不能生效。

2、js初始化

$(function () { 
 //0.初始化fileinput 
 var oFileInput = new FileInput(); 
 oFileInput.Init("txt_file", "/api/OrderApi/ImportOrder"); 
});<span class="cnblogs_code_copy"></span> 
<span class="cnblogs_code_copy"></span> 
//初始化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的基础使用大概就介绍完了,其实就是一个上传的组件,也不存在什么高级用法。重点是把界面做得更加友好,更好的增加用户体验。如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS对URL字符串进行编码/解码分析
Oct 25 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
浅谈webpack组织模块的原理
Mar 10 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 Javascript
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
jQuery按需加载轮播图(web前端性能优化)
Feb 17 #Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 #Javascript
浅析JavaScript中var that=this
Feb 17 #Javascript
Bootstrap表格使用方法详解
Feb 17 #Javascript
BootStrap与Select2使用小结
Feb 17 #Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 #Javascript
Vue.js原理分析之observer模块详解
Feb 17 #Javascript
You might like
教你IIS6的PHP最佳配置方法
2006/09/05 PHP
GD输出汉字的函数的分析
2006/10/09 PHP
php设计模式小结
2013/02/15 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
angular 服务随记小结
2019/05/06 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
Vue父组件监听子组件生命周期
2020/09/03 Javascript
python读取csv文件示例(python操作csv)
2014/03/11 Python
Python中分数的相关使用教程
2015/03/30 Python
python opencv之分水岭算法示例
2018/02/24 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
董事长职责范文
2013/11/08 职场文书
音乐器材管理制度
2014/01/31 职场文书
岗位说明书怎么写
2014/07/30 职场文书
酒店前台辞职书
2015/02/26 职场文书
房贷收入证明范本
2015/06/12 职场文书
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python