BootStrap Fileinput 플러그인과 테이블 플러그인이 결합되어 가져온 Excel 데이터의 파일 업로드, 미리보기 및 제출 단계를 실현합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

BootStrap Fileinput 플러그인과 테이블 플러그인이 결합되어 가져온 Excel 데이터의 파일 업로드, 미리보기 및 제출 단계를 실현합니다.

巴扎黑

May 15, 2018 am 10:53 AM

bootstrapfileinput시트

이 글에서는 주로 BootStrap Fileinput 플러그인과 Bootstrap 테이블 플러그인을 결합하여 파일 업로드, 미리보기 및 제출을 구현하여 Excel 데이터를 가져오는 단계를 소개합니다. 필요한 친구는

bootstrap-fileinput 소스 코드를 참조할 수 있습니다. : https://github.com/kartik-v/bootstrap-fileinput

bootstrap-fileinput 온라인 API: http://plugins.krajee.com/file-input

bootstrap-fileinput 데모 디스플레이: http://plugins .krajee.com/file-basic-usage-demo

이 플러그인은 주로 이미지 업로드 처리 작업을 처리하는 방법을 소개합니다. 원래 내 Excel 가져오기 작업은 Uploadify 플러그인을 사용했습니다. 첨부파일 업로드 컴포넌트 uploadify'를 사용하는데, 이를 위해서는 Flash 제어가 필요합니다. 네, 일부 브라우저(크롬 등)에서는 더 번거로워서 좀 더 일반적인 업로드 플러그인을 사용하기로 했습니다. 이번에는 프레임워크 시스템을 먼저 업그레이드했습니다. Bootstrap 프론트엔드 아키텍처를 기반으로 기존 Uploadify 플러그인을 대체하여 다양한 브라우저에서 차이 없이 페이지 업로드가 가능합니다.

일반적으로 플러그인을 정상적으로 사용하려면 다음 두 파일을 소개해야 합니다.

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

파일 입력 플러그인을 사용할 때 Asp.NET MVC 기반인 경우 BundleConfig를 사용할 수 있습니다. cs를 사용하여 해당 To 참조를 추가하려면 참조용으로 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 코드를 사용하여 인터페이스 표시를 구현합니다. 기본 부트스트랩 파일 입력 플러그인 문은 주로 기본 인터페이스 코드입니다.

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

Excel에서 가져온 인터페이스 표시는 다음과 같습니다.

지정된 파일을 선택하면 다음 인터페이스와 같이 Excel 파일 목록을 볼 수 있습니다.

파일을 업로드하면 팝업 레이어 목록에 데이터가 직접 표시됩니다. 여기서는 Bootstrap-table 테이블 플러그인을 사용하여 직접 표시합니다.

이런 방식으로 Excel 기록을 표시하고, 미리보기 기능을 구현하고, 필요한 기록을 확인한 다음 저장하고 저장을 위해 서버에 제출하여 Excel 데이터를 데이터베이스로 실제로 가져오는 것을 실현할 수 있습니다. 처리.

2.Excel 내보내기 작업 상세 소개

실제로 Excel을 가져오는 인터페이스에서 HTML 코드는 다음과 같습니다.



 

 

 

 
 
文件导入
 
 
 

  
  
  TestUser-模板.xls
  
 
 
 
  
   
  <input id="excelFile" type="file">

부트스트랩 파일 입력의 다양한 속성에 대해 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: &#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;);
 }
 });
 }

위의 특정 로직은 파일 업로드를 위한 배경 페이지를 /FileUpload/Upload로 설정하는 것이며, 다양한 플러그인의 구성 매개변수인 UploadExtraData는 제출된 추가 매개변수를 설정합니다. 이 매개변수는 백그라운드 컨트롤러가 수신하는 매개변수 중 하나입니다. which

.on(&#39;fileuploaded&#39;, function (event, data, previewId, index) {

함수는 파일 업로드 후 처리 기능을 처리합니다. 업로드된 파일에서 반환된 결과가 성공하면 다음과 같이 ajax를 다시 호출하여 Excel 필드가 요구 사항을 충족하는지 확인합니다.

url: &#39;/TestUser/CheckExcelColumns?guid=&#39; + guid,

배경이 레코드가 성공하면 미리 보기 위해 Excel 레코드를 다시 추출하고 다음 파일 업로드를 용이하게 하기 위해 부트스트랩 파일 입력 파일 업로드 플러그인을 지워야 합니다. 다음 코드에 표시된 대로입니다.

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

그중 RefreshExcel은 다음 업로드를 용이하게 하기 위해 업로드된 추가 매개변수 값을 다시 업데이트하는 것입니다. 그렇지 않으면 추가 매개변수의 값이 변경되지 않으므로 우리가 설정한 GUID가 변경되지 않고 문제가 발생합니다.

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

그 중 InitImport는 미리보기 데이터를 얻어서 Bootstrap-table 테이블 플러그인에 표시하는 것입니다. 이 플러그인에 대한 자세한 사용 방법은 "Metronic 기반 Bootstrap 개발 프레임워크 경험 요약"을 참조하세요. (16)--플러그인 부트스트랩 사용-"테이블은 테이블 레코드의 쿼리, 페이징, 정렬 및 기타 처리를 구현합니다."

 //根据条件查询并绑定结果
 var $import;
 function InitImport(guid) {
 var url = "/TestUser/GetExcelData?guid=" + guid;
 $import = $(&#39;#gridImport&#39;).bootstrapTable({
 url: url,  //请求后台的URL（*）
 method: &#39;GET&#39;,  //请求方式（*）
 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: &#39;Name&#39;,
  title: &#39;姓名&#39;
 }, {
  field: &#39;Mobile&#39;,
  title: &#39;手机&#39;
 }, {
  field: &#39;Email&#39;,
  title: &#39;邮箱&#39;,
  formatter: emailFormatter
 }, {
  field: &#39;Homepage&#39;,
  title: &#39;主页&#39;,
  formatter: linkFormatter
 }, {
  field: &#39;Hobby&#39;,
  title: &#39;兴趣爱好&#39;
 }, {
  field: &#39;Gender&#39;,
  title: &#39;性别&#39;,
  formatter: sexFormatter
 }, {
  field: &#39;Age&#39;,
  title: &#39;年龄&#39;
 }, {
  field: &#39;BirthDate&#39;,
  title: &#39;出生日期&#39;,
  formatter: dateFormatter
 }, {
  field: &#39;Height&#39;,
  title: &#39;身高&#39;
 }, {
  field: &#39;Note&#39;,
  title: &#39;备注&#39;
 }],
 onLoadSuccess: function () {
 },
 onLoadError: function () {
  showTips("数据加载失败！");
 },
 });
 }

마지막으로 제출이 확인되면 다음 코드와 같이 데이터가 JS를 통해 처리되도록 백그라운드로 제출됩니다.

 //保存导入的数据
 function SaveImport() {
 var list = [];//构造集合对象
 var rows = $import.bootstrapTable(&#39;getSelections&#39;);
 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
 });
 }

3. 백그라운드 컨트롤러 코드 분석

여기서 JS 코드에는 Upload, CheckExcelColumns, GetExcelData, SaveExcelData와 같은 여러 MVC 백그라운드 메서드 처리가 포함됩니다. 여기에서는 별도로 소개합니다.

파일 업로드를 위한 백그라운드 컨트롤러 방식은 다음과 같습니다.

 /// <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 컬렉션으로 형식화하여 클라이언트에서 다양한 속성을 쉽게 조작할 수 있도록 합니다.

 /// <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 플러그인과 테이블 플러그인이 결합되어 가져온 Excel 데이터의 파일 업로드, 미리보기 및 제출 단계를 실현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.