BootStrap Fileinput插件和Bootstrap table表格插件相結(jié)合實(shí)現(xiàn)文件上傳、預(yù)覽、提交的導(dǎo)入Excel數(shù)據(jù)操作步驟

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

 //添加對(duì)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">

<!--導(dǎo)入數(shù)據(jù)操作層-->
<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">文件導(dǎo)入</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導(dǎo)入操作" style="padding: 5px">
 <input type="hidden" id="AttachGUID" name="AttachGUID" /> 
 <input id="excelFile" type="file"> 
 </div>
 </form>
 <!--數(shù)據(jù)顯示表格-->
 <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">關(guān)閉</button>
 <button type="button" class="btn btn-primary" onclick="SaveImport()">保存</button>
 </div>
 </div>
 </div>
</div>

 //初始化Excel導(dǎo)入的文件
 function InitExcelFile() {
 //記錄GUID
 $("#AttachGUID").val(newGuid());
 $("#excelFile").fileinput({
 uploadUrl: "/FileUpload/Upload",//上傳的地址
 uploadAsync: true, //異步上傳
 language: "zh", //設(shè)置語言
 showCaption: true, //是否顯示標(biāo)題
 showUpload: true, //是否顯示上傳按鈕
 showRemove: true, //是否顯示移除按鈕
 showPreview : true, //是否顯示預(yù)覽按鈕
 browseClass: "btn btn-primary", //按鈕樣式 
 dropZoneEnabled: false, //是否顯示拖拽區(qū)域
 allowedFileExtensions: ["xls", "xlsx"], //接收的文件后綴
 maxFileCount: 1, //最大上傳文件數(shù)限制
 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: { //上傳的時(shí)候，增加的附加參數(shù)
 folder: '數(shù)據(jù)導(dǎo)入文件', 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; //返回結(jié)果
 if (res.Success) {
 showTips('上傳成功');
 var guid = $("#AttachGUID").val();
 //提示用戶Excel格式是否正常，如果正常加載數(shù)據(jù)
 $.ajax({
 url: '/TestUser/CheckExcelColumns?guid=' + guid,
 type: 'get',
 dataType: 'json',
 success: function (data) {
 if (data.Success) {
 InitImport(guid); //重新刷新表格數(shù)據(jù)
 showToast("文件已上傳，數(shù)據(jù)加載完畢！");
 //重新刷新GUID，以及清空文件，方便下一次處理
 RefreshExcel();
 }
 else {
 showToast("上傳的Excel文件檢查不通過。請(qǐng)根據(jù)頁面右上角的Excel模板格式進(jìn)行數(shù)據(jù)錄入。", "error");
 }
 }
 });
 }
 else {
 showTips('上傳失敗');
 }
 });
 }

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

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

 if (data.Success) {
 InitImport(guid); //重新刷新表格數(shù)據(jù)
 showToast("文件已上傳，數(shù)據(jù)加載完畢！");
 //重新刷新GUID，以及清空文件，方便下一次處理
 RefreshExcel();
 }
 else {
 showToast("上傳的Excel文件檢查不通過。請(qǐng)根據(jù)頁面右上角的Excel模板格式進(jìn)行數(shù)據(jù)錄入。", "error");
 }

 //重新更新GUID的值，并清空文件
 function RefreshExcel() {
 $("#AttachGUID").val(newGuid());
 $('#excelFile').fileinput('clear');//清空所有文件
 //附加參數(shù)初始化后一直不會(huì)變化，如果需要發(fā)生變化，則需要使用refresh進(jìn)行更新
 $('#excelFile').fileinput('refresh', {
 uploadExtraData: { folder: '數(shù)據(jù)導(dǎo)入文件', guid: $("#AttachGUID").val() },
 });
 }

 //根據(jù)條件查詢并綁定結(jié)果
 var $import;
 function InitImport(guid) {
 var url = "/TestUser/GetExcelData?guid=" + guid;
 $import = $('#gridImport').bootstrapTable({
 url: url, //請(qǐng)求后臺(tái)的URL（*）
 method: 'GET', //請(qǐng)求方式（*）
 striped: true, //是否顯示行間隔色
 cache: false, //是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性（*）
 pagination: false, //是否顯示分頁（*）
 sidePagination: "server", //分頁方式：client客戶端分頁，server服務(wù)端分頁（*）
 pageNumber: 1, //初始化加載第一頁，默認(rèn)第一頁,并記錄
 pageSize: 100, //每頁的記錄行數(shù)（*）
 pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(shù)（*）
 search: false, //是否顯示表格搜索
 strictSearch: true,
 showColumns: true, //是否顯示所有的列（選擇顯示的列）
 showRefresh: true, //是否顯示刷新按鈕
 minimumCountColumns: 2, //最少允許的列數(shù)
 clickToSelect: true, //是否啟用點(diǎn)擊選中行
 uniqueId: "ID", //每一行的唯一標(biāo)識(shí)，一般為主鍵列
 queryParams: function (params) { },
 columns: [{
 checkbox: true,
 visible: true //是否顯示復(fù)選框 
 }, {
 field: 'Name',
 title: '姓名'
 }, {
 field: 'Mobile',
 title: '手機(jī)'
 }, {
 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("數(shù)據(jù)加載失敗！");
 },
 });
 }

 //保存導(dǎo)入的數(shù)據(jù)
 function SaveImport() {
 var list = [];//構(gòu)造集合對(duì)象
 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("請(qǐng)選擇一條記錄", "warning");
 return;
 }
 var postData = { 'list': list };//可以增加其他參數(shù)，如{ '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.關(guān)閉彈出層，2.清空記錄顯示 3.刷新主列表
 showToast("保存成功");
 $("#import").modal("hide");
 $(bodyTag).html("");
 Refresh();
 }
 else {
 showToast("保存失敗:" + data.ErrorMessage, "error");
 }
 },
 data: postData
 });
 }

 /// <summary>
 /// 上傳附件到服務(wù)器上
 /// </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); //文件擴(kuò)展名
 //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對(duì)象為空";
 }
 return ToJsonContent(result);
 }

 //導(dǎo)入或?qū)С龅淖侄瘟斜?
 string columnString = "姓名,手機(jī),郵箱,主頁,興趣愛好,性別,年齡,出生日期,身高,備注";
 /// <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);
 }

 /// <summary>
 /// 獲取服務(wù)器上的Excel文件，并把它轉(zhuǎn)換為實(shí)體列表返回給客戶端
 /// </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 數(shù)據(jù)轉(zhuǎn)換
 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["手機(jī)"].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);
 }

 /// <summary>
 /// 保存客戶端上傳的相關(guān)數(shù)據(jù)列表
 /// </summary>
 /// <param name="list">數(shù)據(jù)列表</param>
 /// <returns></returns>
 public ActionResult SaveExcelData(List<TestUserInfo> list)
 {
 CommonResult result = new CommonResult();
 if (list != null && list.Count > 0)
 {
 #region 采用事務(wù)進(jìn)行數(shù)據(jù)提交
 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 = "導(dǎo)入信息不能為空";
 }
 return ToJsonContent(result);
 }