上面的逻辑具体就是，设置上传文件的后台页面为：/FileUpload/Upload，以及各种插件的配置参数，uploadExtraData里面设置的是提交的附加参数，也就是后台控制器接收的参数，其中
.on('fileuploaded', function (event, data, previewId, index) {
的函数处理文件上传后的处理函数，如果上传文件返回的结果是成功的，那么我们再次调用ajax来检查这个Excel的字段是否符合要求，如下地址：
url: '/TestUser/CheckExcelColumns?guid=' + guid,
如果这个检查的后台返回成功的记录，那么再次需要把Excel记录提取出来预览，并清空bootstrap fileinput文件上传插件，方便下次上传文件。如下代码所示。
if (data.Success) { InitImport(guid); //重新刷新表格数据 showToast("文件已上传，数据加载完毕！"); //重新刷新GUID，以及清空文件，方便下一次处理 RefreshExcel(); } else { showToast("上传的Excel文件检查不通过。请根据页面右上角的Excel模板格式进行数据录入。", "error"); }
其中RefreshExcel就是重新更新上传的附加参数值，方便下次上传，否则附加参数的值一直不变化，就会导致我们设置的GUID没有变化而出现问题。
//重新更新GUID的值，并清空文件 function RefreshExcel() { $("#AttachGUID").val(newGuid()); $('#excelFile').fileinput('clear');//清空所有文件 //附加参数初始化后一直不会变化，如果需要发生变化，则需要使用refresh进行更新 $('#excelFile').fileinput('refresh', { uploadExtraData: { folder: '数据导入文件', guid: $("#AttachGUID").val() }, }); }
而其中InitImport就是获取预览数据并展示在Bootstrap-table表格插件上的，关于这个插件的详细使用，可以回顾下随笔《基于Metronic的Bootstrap开发框架经验总结（16）-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理》进行了解即可。
//根据条件查询并绑定结果 var $import; function InitImport(guid) { var url = "/TestUser/GetExcelData?guid=" + guid; $import = $('#gridImport').bootstrapTable({ url: url, //请求后台的URL（*） method: 'GET', //请求方式（*） striped: true, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） pagination: false, //是否显示分页（*） sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） pageNumber: 1, //初始化加载第一页，默认第一页,并记录 pageSize: 100, //每页的记录行数（*） pageList: [10, 25, 50, 100], //可供选择的每页的行数（*） search: false, //是否显示表格搜索 strictSearch: true, showColumns: true, //是否显示所有的列（选择显示的列） showRefresh: true, //是否显示刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启用点击选中行 uniqueId: "ID", //每一行的唯一标识，一般为主键列 queryParams: function (params) { }, columns: [{ checkbox: true, visible: true //是否显示复选框 }, { field: 'Name', title: '姓名' }, { field: 'Mobile', title: '手机' }, { field: 'Email', title: '邮箱', formatter: emailFormatter }, { field: 'Homepage', title: '主页', formatter: linkFormatter }, { field: 'Hobby', title: '兴趣爱好' }, { field: 'Gender', title: '性别', formatter: sexFormatter }, { field: 'Age', title: '年龄' }, { field: 'BirthDate', title: '出生日期', formatter: dateFormatter }, { field: 'Height', title: '身高' }, { field: 'Note', title: '备注' }], onLoadSuccess: function () { }, onLoadError: function () { showTips("数据加载失败！"); }, }); }
最后就是确认提交后，会通过JS提交数据到后台进行处理，如下代码所示。