BootStrap Fileinput外掛程式和Bootstrap table表格外掛程式相結合實現檔案上傳、預覽、提交的匯入Excel資料操作步驟，bootstrapfileinput

BootStrap Fileinput外掛程式和Bootstrap table表格外掛程式相結合實現檔案上傳、預覽、提交的匯入Excel資料操作步驟，bootstrapfileinput

bootstrap-fileinput源碼：https://github.com/kartik-v/bootstrap-fileinput

bootstrap-fileinput線上API：http://plugins.krajee.com/file-input

bootstrap-fileinput Demo展示：http://plugins.krajee.com/file-basic-usage-demo

這個外掛程式主要是介紹如何處理圖片上傳的處理操作，原先我的Excel匯入操作使用的是Uploadify外掛程式，可以參考我隨筆《附件上傳組件uploadify的使用》，不過這個需要Flash控制項支援，在某些瀏覽器（如Chrome）就比較麻煩了，因此決定使用一種較為通用的上傳外掛程式，這次首先對基於Bootstrap前端架構的架構系統進行升級，替代原來的Uploadify外掛程式，這樣頁面上傳功能，在各個瀏覽器就可以無差異的實現了。

一般情況下，我們需要引入下面兩個檔案，外掛程式才能正常使用：

bootstrap-fileinput/css/fileinput.min.cssbootstrap-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 id="excelFile" type="file">

Excel匯入的的介面展示如下所示。

選擇指定檔案後，我們可以看到Excel的檔案清單，如下介面所示。

上傳檔案後，資料直接展示在彈出層的列表裡面，這裡直接使用了 Bootstrap-table表格外掛程式進行展示。

這樣我們就可以把Excel的記錄展示出來，實現了預覽的功能，勾選必要的記錄，然後儲存即可提交到伺服器進行儲存，實現了Excel資料的真正匯入資料庫處理。

2、Excel匯出操作詳細介紹

我們在實際匯入Excel的介面中，HTML代碼如下所示。

<!--匯入資料操作層--><div id="import" class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header bg-primary"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> <h4 class="modal-title">檔案匯入</h4> </div> <div class="modal-body"> <div style="text-align:right;padding:5px">  <a href="~/Content/Template/TestUser-模板.xls" rel="external nofollow" onclick="javascript:Preview();">  <img alt="測試使用者資訊-模板" src="~/Content/images/ico_excel.png" />  <span style="font-size:larger;font-weight:200;color:red">TestUser-模板.xls</span>  </a> </div> <hr/> <form id="ffImport" method="post">  <div title="Excel匯入操作" style="padding: 5px">  <input type="hidden" id="AttachGUID" name="AttachGUID" />   <input id="excelFile" type="file">   </div> </form> <!--資料顯示表格--> <table id="gridImport" class="table table-striped table-bordered table-hover" cellpadding="0" cellspacing="0" border="0"> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary" onclick="SaveImport()">儲存</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 class="glyphicon glyphicon-file"></i>', allowedPreviewTypes: null, previewFileIconSettings: {  'docx': '<i class="glyphicon glyphicon-file"></i>',  'xlsx': '<i class="glyphicon glyphicon-file"></i>',  'pptx': '<i class="glyphicon glyphicon-file"></i>',  'jpg': '<i class="glyphicon glyphicon-picture"></i>',  'pdf': '<i class="glyphicon glyphicon-file"></i>',  'zip': '<i class="glyphicon glyphicon-file"></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('上傳失敗'); } }); }

上面的邏輯具體就是，設定上傳檔案的後台頁面為：/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提交資料到後台進行處理，如下代碼所示。    

 //儲存匯入的資料 function SaveImport() { var list = [];//構造集合對象 var rows = $import.bootstrapTable('getSelections'); for (var i = 0; i < rows.length; i++) { list.push({  'Name': rows[i].Name, 'Mobile': rows[i].Mobile, 'Email': rows[i].Email, 'Homepage': rows[i].Homepage,  'Hobby': rows[i].Hobby, 'Gender': rows[i].Gender, 'Age': rows[i].Age, 'BirthDate': rows[i].BirthDate,  'Height': rows[i].Height, 'Note': rows[i].Note }); } if (list.length == 0) { showToast("請選擇一條記錄", "warning"); return; } var postData = { 'list': list };//可以增加其他參數，如{ 'list': list, 'Rucanghao': $("#Rucanghao").val() }; postData = JSON.stringify(postData); $.ajax({ url: '/TestUser/SaveExcelData', type: 'post', dataType: 'json', contentType: 'application/json;charset=utf-8', 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 }); }

3、後台控制器程式碼分析

這裡我們的JS代碼裡面，涉及了幾個MVC背景方法處理：Upload、CheckExcelColumns、GetExcelData、SaveExcelData。這裡分別進行介紹。

檔案上傳的後台控制器方法如下所示。      

 /// <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); }

檔案上傳處理後，返回一個通用的CommonResult 的結果對象，也方便我們在JS用戶端進行判斷處理。

而其中檢查我們匯入Excel的資料是否滿足列要求的處理，就是判斷它的資料列和我們預先設定好的列名是否一致即可。    

 //匯入或匯出的欄位列表  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); }

而GetExcelData則是格式化Excel資料到具體的List<TestUserInfo>集合裡面，這樣我們方便在用戶端進行各種屬性的操作，它的代碼如下所示。     

 /// <summary> /// 擷取伺服器上的Excel檔案，並把它轉換為實體列表返回給用戶端 /// </summary> /// <param name="guid">附件的GUID</param> /// <returns></returns> public ActionResult GetExcelData(string guid) { if (string.IsNullOrEmpty(guid)) { return null; } List<TestUserInfo> list = new List<TestUserInfo>(); DataTable table = ConvertExcelFileToTable(guid); if (table != null) { #region 資料轉換 int i = 1; foreach (DataRow dr in table.Rows) {  bool converted = false;  DateTime dtDefault = Convert.ToDateTime("1900-01-01");  DateTime dt;  TestUserInfo info = new TestUserInfo();  info.Name = dr["姓名"].ToString();  info.Mobile = dr["手機"].ToString();  info.Email = dr["郵箱"].ToString();  info.Homepage = dr["首頁"].ToString();  info.Hobby = dr["興趣愛好"].ToString();  info.Gender = dr["性別"].ToString();  info.Age = dr["年齡"].ToString().ToInt32();  converted = DateTime.TryParse(dr["出生日期"].ToString(), out dt);  if (converted && dt > dtDefault)  {  info.BirthDate = dt;  }  info.Height = dr["身高"].ToString().ToDecimal();  info.Note = dr["備忘"].ToString();  info.Creator = CurrentUser.ID.ToString();  info.CreateTime = DateTime.Now;  info.Editor = CurrentUser.ID.ToString();  info.EditTime = DateTime.Now;  list.Add(info); } #endregion } var result = new { total = list.Count, rows = list }; return ToJsonContent(result); }

另一個SaveExcelData的函數就是處理資料匯入的最終處理函數，主要就是把集合寫入到具體的資料庫裡面即可，具體代碼如下所示。    

 /// <summary> /// 儲存用戶端上傳的相關資料列表 /// </summary> /// <param name="list">資料列表</param> /// <returns></returns> public ActionResult SaveExcelData(List<TestUserInfo> list) { CommonResult result = new CommonResult(); if (list != null && list.Count > 0) { #region 採用事務進行資料提交 DbTransaction trans = BLLFactory<TestUser>.Instance.CreateTransaction(); if (trans != null) {  try  {  //int seq = 1;  foreach (TestUserInfo detail in list)  {  //detail.Seq = seq++;//增加1  detail.CreateTime = DateTime.Now;  detail.Creator = CurrentUser.ID.ToString();  detail.Editor = CurrentUser.ID.ToString();  detail.EditTime = DateTime.Now;  BLLFactory<TestUser>.Instance.Insert(detail, trans);  }  trans.Commit();  result.Success = true;  }  catch (Exception ex)  {  LogTextHelper.Error(ex);  result.ErrorMessage = ex.Message;  trans.Rollback();  } } #endregion } else { result.ErrorMessage = "匯入資訊不可為空"; } return ToJsonContent(result); }

上面這幾個函數的代碼一般是比較有規律的，不需要一個個去編寫，一般通過代碼產生工具Database2Sharp批量產生即可。這樣可以有效提高Web的介面代碼和後台代碼的開發效率，減少出錯的機會。

整個匯入Excel資料的處理過程，所有代碼都貼出來了，基本上整個邏輯瞭解了就可以很好的瞭解這個過程的代碼了。

總結

以上所述是小編給大家介紹的BootStrap Fileinput外掛程式和Bootstrap table表格外掛程式相結合實現檔案上傳、預覽、提交的匯入Excel資料操作步驟，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！