bootstrap-fileinput源码：https://github.com/kartik-v/bootstrap-fileinput
这个插件主要是介绍如何处理图片上传的处理操作，原先我的Excel导入操作使用的是Uploadify插件，可以参考我随笔《附件上传组件uploadify的使用》，不过这个需要Flash控件支持，在某些浏览器（如Chrome）就比较麻烦了，因此决定使用一种较为通用的上传插件，这次首先对基于Bootstrap前端架构的框架系统进行升级，替代原来的Uploadify插件，这样页面上传功能，在各个浏览器就可以无差异的实现了。
一般情况下，我们需要引入下面两个文件，插件才能正常使用：
bootstrap-fileinput/css/fileinput.min.css bootstrap-fileinput/js/fileinput.min.js
在File input 插件使用的时候，如果是基于Asp.NET MVC的，那么我们可以使用BundleConfig.cs进行添加对应的引用，加入到Bundles集合引用即可。
//添加对bootstrap-fileinput控件的支持 css_metronic.Include("~/Content/MyPlugins/bootstrap-fileinput/css/fileinput.min.css"); js_metronic.Include("~/Content/MyPlugins/bootstrap-fileinput/js/fileinput.min.js"); js_metronic.Include("~/Content/MyPlugins/bootstrap-fileinput/js/locales/zh.js");
在页面中，我们使用以下HTML代码实现界面展示，主要的bootstrap fileinput插件声明，主要是基础的界面代码
<input type="file">
Excel导入的的界面展示如下所示。
选择指定文件后，我们可以看到Excel的文件列表，如下界面所示。
上传文件后，数据直接展示在弹出层的列表里面，这里直接使用了 Bootstrap-table表格插件进行展示。
这样我们就可以把Excel的记录展示出来，实现了预览的功能，勾选必要的记录，然后保存即可提交到服务器进行保存，实现了Excel数据的真正导入数据库处理。
2、Excel导出操作详细介绍
我们在实际导入Excel的界面中，HTML代码如下所示。
<!--导入数据操作层--> <div tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true"></button> <h4>文件导入</h4> </div> <div> <div> <a href="https://www.jb51.net/~/Content/Template/TestUser-模板.xls"> <img alt="测试用户信息-模板" src="https://www.jb51.net/~/Content/images/ico_excel.png" /> <span>TestUser-模板.xls</span> </a> </div> <hr/> <form method="post"> <div title="Excel导入操作"> <input type="hidden" /> <input type="file"> </div> </form> <!--数据显示表格--> <table cellpadding="0" cellspacing="0"> </table> </div> <div> <button type="button" data-dismiss="modal">关闭</button> <button type="button">保存</button> </div> </div> </div> </div>
对于bootstrap fileinput的各种属性，我们这里使用JS进行初始化，这样方便统一管理和修改。
//初始化Excel导入的文件 function InitExcelFile() { //记录GUID $("#AttachGUID").val(newGuid()); $("#excelFile").fileinput({ uploadUrl: "/FileUpload/Upload",//上传的地址 uploadAsync: true, //异步上传 language: "zh", //设置语言 showCaption: true, //是否显示标题 showUpload: true, //是否显示上传按钮 showRemove: true, //是否显示移除按钮 showPreview : true, //是否显示预览按钮 browseClass: "btn btn-primary", //按钮样式 dropZoneEnabled: false, //是否显示拖拽区域 allowedFileExtensions: ["xls", "xlsx"], //接收的文件后缀 maxFileCount: 1, //最大上传文件数限制 previewFileIcon: '<i></i>', allowedPreviewTypes: null, previewFileIconSettings: { 'docx': '<i></i>', 'xlsx': '<i></i>', 'pptx': '<i></i>', 'jpg': '<i></i>', 'pdf': '<i></i>', 'zip': '<i></i>', }, uploadExtraData: { //上传的时候，增加的附加参数 folder: '数据导入文件', guid: $("#AttachGUID").val() } }) //文件上传完成后的事件 .on('fileuploaded', function (event, data, previewId, index) { var form = data.form, files = data.files, extra = data.extra, response = data.response, reader = data.reader; var res = data.response; //返回结果 if (res.Success) { showTips('上传成功'); var guid = $("#AttachGUID").val(); //提示用户Excel格式是否正常，如果正常加载数据 $.ajax({ url: '/TestUser/CheckExcelColumns?guid=' + guid, type: 'get', dataType: 'json', success: function (data) { if (data.Success) { InitImport(guid); //重新刷新表格数据 showToast("文件已上传，数据加载完毕！"); //重新刷新GUID，以及清空文件，方便下一次处理 RefreshExcel(); } else { showToast("上传的Excel文件检查不通过。请根据页面右上角的Excel模板格式进行数据录入。", "error"); } } }); } else { showTips('上传失败'); } }); }