bootstrap fileinput完整实例分享

 更新时间:2016年11月08日 09:31:08   作者:y酒味i  
这篇文章主要为大家分享文件上传组件bootstrap fileinput完整实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本篇介绍如何使用bootstrap fileinput.js,file input插件功能如此强大,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,最好用的文件上传组件。

文件夹结构

版本都是3.x

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title> New Document </title>
 <meta name="Generator" content="EditPlus">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <link href="bootstrap-3.3.5/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-fileinput-master/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="jquery-2.1.1.min.js"></script>x
<script src="bootstrap-fileinput-master/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script>
<script src="bootstrap-fileinput-master/js/fileinput.min.js"></script>
<script src="bootstrap-3.3.5/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="bootstrap-fileinput-master/js/fileinput_locale_zh.js"></script>
 </head>

 <body>
<form>
 <div class="" 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">&times;</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>
 </body>
</html>

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

知识只有共享才能传播,才能推崇出新的知识,才能学到更多,这里写的每一篇文字/博客,基本都是从网上查询了一下资料然后记录下来,也有些是原滋原味搬了过来,也有时加了一些自己的想法,希望大家喜欢。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 谈谈IntersectionObserver懒加载的具体使用

    谈谈IntersectionObserver懒加载的具体使用

    这篇文章主要介绍了谈谈IntersectionObserver懒加载的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • JS XMLHttpRequest原理与使用方法深入详解

    JS XMLHttpRequest原理与使用方法深入详解

    这篇文章主要介绍了JS XMLHttpRequest原理与使用方法,结合实例形式深入分析了JS XMLHttpRequest相关原理、使用方法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • js实现简单模态框实例

    js实现简单模态框实例

    这篇文章主要为大家详细介绍了js实现简单模态框实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • 小程序自定义导航栏兼容适配所有机型(附完整案例)

    小程序自定义导航栏兼容适配所有机型(附完整案例)

    这篇文章主要介绍了小程序自定义导航栏兼容适配所有机型(附完整案例),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • js实现自定义下拉框

    js实现自定义下拉框

    这篇文章主要为大家详细介绍了js实现自定义下拉框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 超级简单实现JavaScript MVC 样式框架

    超级简单实现JavaScript MVC 样式框架

    本文给大家分享的是一则翻译过来的,由国外友人写的如何简单有效的实现javascript MVC样式框架,算是一个MVC的入门教程,希望大家能够喜欢。
    2015-03-03
  • 很全面的JavaScript常用功能汇总集合

    很全面的JavaScript常用功能汇总集合

    这篇文章主要为大家分享了一份很全面的JavaScript常用功能汇总集合,一些常用的额JS 对象、基本数据结构、功能函数等,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • use jscript with List Proxy Server Information

    use jscript with List Proxy Server Information

    use jscript with List Proxy Server Information...
    2007-06-06
  • js校验表单后提交表单的三种方法总结

    js校验表单后提交表单的三种方法总结

    本篇文章主要是对js校验表单后提交表单的三种方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • JavaScript事件详细讲解

    JavaScript事件详细讲解

    本文给大家介绍js事件详解,涉及到事件流,事件处理,事件对象等方面的知识,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-06-06

最新评论