Das BootStrap Fileinput-Plug-in und das Tabellen-Plug-in werden kombiniert, um die Schritte des Datei-Uploads, der Vorschau und der Übermittlung importierter Excel-Daten zu realisieren.

bootstrap-fileinput/css/fileinput.min.css
bootstrap-fileinput/js/fileinput.min.js

 //添加对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");

<input id="excelFile" type="file">

 

 

 

 
 
文件导入
 

 

 

  
  
  TestUser-模板.xls
  
 
 

 

  

   
  <input id="excelFile" type="file"> 
  
 
 
 
 

 

 关闭
 保存
 
 

 

 //初始化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: &#39;<i class="glyphicon glyphicon-file"></i>&#39;,
 allowedPreviewTypes: null,
 previewFileIconSettings: {
  &#39;docx&#39;: &#39;<i class="glyphicon glyphicon-file"></i>&#39;,
  &#39;xlsx&#39;: &#39;<i class="glyphicon glyphicon-file"></i>&#39;,
  &#39;pptx&#39;: &#39;<i class="glyphicon glyphicon-file"></i>&#39;,
  &#39;jpg&#39;: &#39;<i class="glyphicon glyphicon-picture"></i>&#39;,
  &#39;pdf&#39;: &#39;<i class="glyphicon glyphicon-file"></i>&#39;,
  &#39;zip&#39;: &#39;<i class="glyphicon glyphicon-file"></i>&#39;,
 },
 uploadExtraData: { //上传的时候，增加的附加参数
  folder: &#39;数据导入文件&#39;, guid: $("#AttachGUID").val()
 }
 }) //文件上传完成后的事件
 .on(&#39;fileuploaded&#39;, 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(&#39;上传成功&#39;);
  var guid = $("#AttachGUID").val();
  //提示用户Excel格式是否正常，如果正常加载数据
  $.ajax({
  url: &#39;/TestUser/CheckExcelColumns?guid=&#39; + guid,
  type: &#39;get&#39;,
  dataType: &#39;json&#39;,
  success: function (data) {
  if (data.Success) {
  InitImport(guid); //重新刷新表格数据
  showToast("文件已上传，数据加载完毕！");
  //重新刷新GUID，以及清空文件，方便下一次处理
  RefreshExcel();
  }
  else {
  showToast("上传的Excel文件检查不通过。请根据页面右上角的Excel模板格式进行数据录入。", "error");
  }
  }
  });
 }
 else {
  showTips(&#39;上传失败&#39;);
 }
 });
 }

.on('fileuploaded', function (event, data, previewId, index) {

url: '/TestUser/CheckExcelColumns?guid=' + guid,

 if (data.Success) {
 InitImport(guid); //重新刷新表格数据
 showToast("文件已上传，数据加载完毕！");
 //重新刷新GUID，以及清空文件，方便下一次处理
 RefreshExcel();
 }
 else {
 showToast("上传的Excel文件检查不通过。请根据页面右上角的Excel模板格式进行数据录入。", "error");
 }

 //重新更新GUID的值，并清空文件
 function RefreshExcel() {
 $("#AttachGUID").val(newGuid());
 $('#excelFile').fileinput('clear');//清空所有文件
 //附加参数初始化后一直不会变化，如果需要发生变化，则需要使用refresh进行更新
 $('#excelFile').fileinput('refresh', {
 uploadExtraData: { folder: '数据导入文件', guid: $("#AttachGUID").val() },
 });
 }

 //根据条件查询并绑定结果
 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("数据加载失败！");
 },
 });
 }

 //保存导入的数据
 function SaveImport() {
 var list = [];//构造集合对象
 var rows = $import.bootstrapTable('getSelections');
 for (var i = 0; i < rows.length; i++) {
 list.push({
  &#39;Name&#39;: rows[i].Name, &#39;Mobile&#39;: rows[i].Mobile, &#39;Email&#39;: rows[i].Email, &#39;Homepage&#39;: rows[i].Homepage,
  &#39;Hobby&#39;: rows[i].Hobby, &#39;Gender&#39;: rows[i].Gender, &#39;Age&#39;: rows[i].Age, &#39;BirthDate&#39;: rows[i].BirthDate,
  &#39;Height&#39;: rows[i].Height, &#39;Note&#39;: rows[i].Note
 });
 }
 if (list.length == 0) {
 showToast("请选择一条记录", "warning");
 return;
 }
 var postData = { &#39;list&#39;: list };//可以增加其他参数，如{ &#39;list&#39;: list, &#39;Rucanghao&#39;: $("#Rucanghao").val() };
 postData = JSON.stringify(postData);
 $.ajax({
 url: &#39;/TestUser/SaveExcelData&#39;,
 type: &#39;post&#39;,
 dataType: &#39;json&#39;,
 contentType: &#39;application/json;charset=utf-8&#39;,
 traditional: true,
 success: function (data) {
  if (data.Success) {
  //保存成功 1.关闭弹出层，2.清空记录显示 3.刷新主列表
  showToast("保存成功");
  $("#import").modal("hide");
  $(bodyTag).html("");
  Refresh();
  }
  else {
  showToast("保存失败:" + data.ErrorMessage, "error");
  }
 },
 data: postData
 });
 }

 /// <summary>
 /// 上传附件到服务器上
 /// </summary>
 /// <param name="fileData">附件信息</param>
 /// <param name="guid">附件组GUID</param>
 /// <param name="folder">指定的上传目录</param>
 /// <returns></returns>
 [AcceptVerbs(HttpVerbs.Post)]
 public ActionResult Upload(string guid, string folder)
 {
 CommonResult result = new CommonResult();
 HttpFileCollectionBase files = HttpContext.Request.Files;
 if (files != null)
 {
 foreach (string key in files.Keys)
 {
  try
  {
  #region MyRegion
  HttpPostedFileBase fileData = files[key];
  if (fileData != null)
  {
  HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");
  HttpContext.Response.ContentEncoding = Encoding.GetEncoding("UTF-8");
  HttpContext.Response.Charset = "UTF-8";
  // 文件上传后的保存路径
  string filePath = Server.MapPath("~/UploadFiles/");
  DirectoryUtil.AssertDirExist(filePath);
  string fileName = Path.GetFileName(fileData.FileName); //原始文件名称
  string fileExtension = Path.GetExtension(fileName); //文件扩展名
  //string saveName = Guid.NewGuid().ToString() + fileExtension; //保存文件名称
  FileUploadInfo info = new FileUploadInfo();
  info.FileData = ReadFileBytes(fileData);
  if (info.FileData != null)
  {
  info.FileSize = info.FileData.Length;
  }
  info.Category = folder;
  info.FileName = fileName;
  info.FileExtend = fileExtension;
  info.AttachmentGUID = guid;
  info.AddTime = DateTime.Now;
  info.Editor = CurrentUser.Name;//登录人
  result = BLLFactory<FileUpload>.Instance.Upload(info);
  if (!result.Success)
  {
  LogTextHelper.Error("上传文件失败:" + result.ErrorMessage);
  }
  } 
  #endregion
  }
  catch (Exception ex)
  {
  result.ErrorMessage = ex.Message;
  LogTextHelper.Error(ex);
  }
 }
 }
 else
 {
 result.ErrorMessage = "fileData对象为空";
 }
 return ToJsonContent(result);
 }

 //导入或导出的字段列表 
 string columnString = "姓名,手机,邮箱,主页,兴趣爱好,性别,年龄,出生日期,身高,备注";
 /// <summary>
 /// 检查Excel文件的字段是否包含了必须的字段
 /// </summary>
 /// <param name="guid">附件的GUID</param>
 /// <returns></returns>
 public ActionResult CheckExcelColumns(string guid)
 {
 CommonResult result = new CommonResult();
 try
 {
 DataTable dt = ConvertExcelFileToTable(guid);
 if (dt != null)
 {
  //检查列表是否包含必须的字段
  result.Success = DataTableHelper.ContainAllColumns(dt, columnString);
 }
 }
 catch (Exception ex)
 {
 LogTextHelper.Error(ex);
 result.ErrorMessage = ex.Message;
 }
 return ToJsonContent(result);
 }