BootStrap Fileinput 플러그 인과 Bootstrap table 표 플러그 인 을 결합 하여 파일 업로드,미리 보기,제출 한 Excel 데이터 가 져 오기 작업 절 차 를 실현 합 니 다.

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">

<!--       -->
<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>

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

.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({
  '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
 });
 }

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

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

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