이 글에서는 주로 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 코드는 다음과 같습니다.
부트스트랩 파일 입력의 다양한 속성에 대해 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는 제출된 추가 매개변수를 설정합니다. 이 매개변수는 백그라운드 컨트롤러가 수신하는 매개변수 중 하나입니다. which
.on('fileuploaded', function (event, data, previewId, index) {로그인 후 복사
함수는 파일 업로드 후 처리 기능을 처리합니다. 업로드된 파일에서 반환된 결과가 성공하면 다음과 같이 ajax를 다시 호출하여 Excel 필드가 요구 사항을 충족하는지 확인합니다.
url: '/TestUser/CheckExcelColumns?guid=' + guid,
로그인 후 복사
배경이 레코드가 성공하면 미리 보기 위해 Excel 레코드를 다시 추출하고 다음 파일 업로드를 용이하게 하기 위해 부트스트랩 파일 입력 파일 업로드 플러그인을 지워야 합니다. 다음 코드에 표시된 대로입니다.
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)--플러그인 부트스트랩 사용-"테이블은 테이블 레코드의 쿼리, 페이징, 정렬 및 기타 처리를 구현합니다."
//根据条件查询并绑定结果
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 코드에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
