bootstrap fileinput完整实例分享

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

文件夹结构

版本都是3.x

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

 lt;bodygt;
lt;formgt;
 lt;div class="" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"gt;
 lt;div class="modal-dialog modal-lg" role="document"gt;
 lt;div class="modal-content"gt;
 lt;div class="modal-header"gt;
 lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"gt;lt;span aria-hidden="true"gt;times;lt;/spangt;lt;/buttongt;
 lt;h4 class="modal-title" id="myModalLabel"gt;请选择Excel文件lt;/h4gt;
 lt;/divgt;
 lt;div class="modal-body"gt;
 lt;a href="~/Data/ExcelTemplate/Order.xlsx" class="form-control" style="border:none;"gt;下载导入模板lt;/agt;
 lt;input type="file" name="txt_file" id="txt_file" multiple class="file-loading" /gt;
 lt;/divgt;lt;/divgt;
 lt;/divgt;
 lt;/divgt;
lt;/formgt;
 lt;/bodygt;
lt;/htmlgt;

lt;scriptgt;
$(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: "lt;i class='glyphicon glyphicon-king'gt;lt;/igt;",
 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;
};
lt;/scriptgt; 

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

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

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

（编辑：南平站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!