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 相关文章推荐
JavaScript delete 属性的使用
Oct 08 Javascript
jQuery bind事件使用详解
May 05 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
学习Angular中作用域需要注意的坑
Aug 17 Javascript
微信小程序开发常见问题及解决方案
Jul 11 Javascript
js prototype和__proto__的关系是什么
Aug 23 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
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
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
js实现筛选功能
2020/11/24 Javascript
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
使用python装饰器验证配置文件示例
2014/02/24 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
通过cmd进入python的实例操作
2019/06/26 Python
深入解析神经网络从原理到实现
2019/07/26 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
商业房地产广告语
2014/03/13 职场文书
优秀研究生主要事迹
2014/06/03 职场文书
高中生学习计划书
2014/09/15 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
导游词之永泰公主墓
2019/12/04 职场文书