欢迎光临
我的个人博客网站

文件上传到数据库与下载

基于 FinUICore,实现文件上传到数据库与下载

最终效果如图:

文件上传到数据库与下载

功能实现:
1、表单有两个上传字段,用于上传2个文件;

2、点 “浏览”选择错误的文件,可通过 “删除->重置上传控件” 重置;

3、点“保存并关闭” 保存数据并上传文件;

4、重新打开工序报工,可编辑(已保存的表单数据和文件名会重新显示到页面)。如果已上传文件,则上传控件后的 “下载” 和 “删除->删除” 按钮可用;

5、编辑状态,如上传控件重选文件,“保存并关闭”则会覆盖原文件;

6、点 “删除->删除”,可删除文件,不需要点保存即删除(删除前提示确认);删除成功后,控件中的文件名清除、 “下载” 和 “删除->删除” 按钮不可用;

以下介绍实现步骤:

一、创建模型

 

public class R_QC: IKeyID     {         [Key]         public int ID { get; set; }          [Display(Name ="PO工序")]         [Required]         public int POProcID { get; set; }         public B03_POProc B03_POProc { get; set; }          [Display(Name ="送检人员")]         public int? SQCID { get; set; }         public User SQC { get; set; }          [Display(Name ="检验人员")]         public int? QCID { get; set; }         public User QC { get; set; }          [Display(Name ="计划检完时间")]         public DateTime? PFinishTime { get; set; }          [Display(Name = "开始检验时间")]         public DateTime? StartTime { get; set; }          [Display(Name = "完成检验时间")]         public DateTime? EndTime { get; set; }          [Display(Name = "检验结果")]         [StringLength(50)]         public string QCResult { get; set; }          [Display(Name = "检验单上传")]         [StringLength(200)]         public string QCReport { get; set; }          [Display(Name = "检验单上传")]         public byte[] QCReportContent { get; set; }          [Display(Name = "拍照留底")]         [StringLength(200)]         public string Photo { get; set; }         [Display(Name = "拍照留底")]         public byte[] PhotoContent { get; set; }          [Display(Name = "备注")]         [StringLength(500)]         public string Remark { get; set; }          [Display(Name = "操作人")]         public int OperatorID { get; set; }         public User Operator { get; set; }          [Display(Name = "状态")]         public int StatusID { get; set; }         public A07_Statu A07_Statu { get; set; }          [Display(Name = "创建时间")]         public DateTime? CreateTime { get; set; }     }

 

生成的数据表如下图,其中,2个红框为两个文件记录字段,一个字段记录文件名,一个字段存储文件。

文件上传到数据库与下载

 

二、前端界面设计

1、为了实现“上传控件”、“删除”、“下载” 按钮在同一行,需要为  <f:FormRow > 控件标签增加  ColumnWidths=”100%”  属性。

文件上传到数据库与下载

 2、在上传控件后面添加一组菜单按钮,包含  “重置上传控件” 和 “删除”两个菜单按钮。

  • 重置上传控件:点击上传控件的浏览按钮,且选择文件后,可能需要取消选择(不是重选,是取消、不想上传了),可使用该按钮重置、取消选择;方法是为 “重置上传控件” 按钮指定JS,通过 reset() 方法重置。
  • 删除:编辑时,可能需要将已上传文件删除;按钮执行JS,JS弹框提示,点OK后,触发后台事件删除;”删除“ 代码见 “四、文件下载与文件删除”

文件上传到数据库与下载

 

@page @model XXX.Pages.WH.R_QCModel @{     ViewData["Title"] = "R_QC";     var F = Html.F(); }  @section head {  }  @section body{      <f:Panel ID="Panel1" ShowBorder="false" ShowHeader="false" AutoScroll="true" IsFluid="true" IsViewPort="true">         <Toolbars>             <f:Toolbar ID="Toolbar1" Position="Top" ToolbarAlign="Left">                 <Items>                     <f:Button ID="btnClose" Icon="SystemClose" Text="关闭">                         <Listeners>                             <f:Listener Event="click" Handler="F.activeWindow.hide();"></f:Listener>                         </Listeners>                     </f:Button>                     <f:ToolbarSeparator></f:ToolbarSeparator>                     <f:Button ID="btnSaveClose" ValidateForms="SimpleForm1" OnClickFields="SimpleForm1" Icon="SystemSaveClose" OnClick="@Url.Handler("BtnSaveClose_Click")" Text="保存后关闭"></f:Button>                     <f:ToolbarSeparator></f:ToolbarSeparator>                     <f:Button ID="btnFinishClose" ValidateForms="SimpleForm1" OnClickFields="SimpleForm1" IconFont="Check" OnClick="@Url.Handler("BtnSaveClose_Click")" Text="完工关闭"></f:Button>                 </Items>             </f:Toolbar>         </Toolbars>         <Items>             <f:Form ID="SimpleForm1" ShowBorder="false" ShowHeader="false" BodyPadding="10" LabelWidth="110">                 <Rows>                     <f:FormRow>                         <Items>                             <f:DropDownList For="currentR_QC.SQCID" DataTextField="ChineseName" AutoSelectFirstItem="false" DataSource="@Model.Users"                                             DataValueField="ID" EmptyText="请选择人员..." EnableEdit="true"></f:DropDownList>                                                         <f:HiddenField ID="currentR_QCID" Text="@Model.currentR_QCID"></f:HiddenField>                             <f:HiddenField ID="currentR_QCRProcID" Text="@Model.SelectedNodesID"></f:HiddenField>                         </Items>                     </f:FormRow>                     <f:FormRow>                         <Items>                             <f:DropDownList For="currentR_QC.QCID" DataTextField="ChineseName" AutoSelectFirstItem="false" DataSource="@Model.Users"                                             DataValueField="ID" EmptyText="请选择人员..." EnableEdit="true"></f:DropDownList>                         </Items>                     </f:FormRow>                     <f:FormRow>                         <Items>                             <f:TriggerBox For="currentR_QC.PFinishTime" EmptyText="请选择时间" TriggerIcon="Date" CssClass="dtime"></f:TriggerBox>                         </Items>                     </f:FormRow>                     <f:FormRow>                         <Items>                             <f:TriggerBox For="currentR_QC.StartTime" EmptyText="请选择时间" TriggerIcon="Date" CssClass="dtime"></f:TriggerBox>                         </Items>                     </f:FormRow>                     <f:FormRow>                         <Items>                             <f:TriggerBox For="currentR_QC.EndTime" EmptyText="请选择时间" TriggerIcon="Date" CssClass="dtime">                             </f:TriggerBox>                         </Items>                     </f:FormRow>                     <f:FormRow>                         <Items>                             <f:TextBox For="currentR_QC.QCResult"></f:TextBox>                         </Items>                     </f:FormRow>                     <f:FormRow ColumnWidths="100%">                         <Items>                             <f:FileUpload ID="QCReportContent" Label=检验单上传 AcceptFileTypes="image/*" ButtonIcon="Add" Text="@Model.QCReport"></f:FileUpload>                             <f:Button ID="btDelete" Icon="Delete" Text="删除...">                                 <Menu>                                     <f:MenuButton ID="rsQCReportContent" Text="重置上传控件" IconFont="Repeat">                                         <Listeners>                                             <f:Listener Event="click" Handler="reSetQCReportContent();"></f:Listener>                                         </Listeners>                                     </f:MenuButton>                                     <f:MenuButton ID="mbtDeleteQ" Text="删除" Enabled="@Model.btQCReport" IconFont="Remove">                                         <Listeners>                                             <f:Listener Event="click" Handler="reMoveFile('Q');"></f:Listener>                                         </Listeners>                                     </f:MenuButton>                                 </Menu>                             </f:Button>                             <f:Button ID="btDownloadQCRep" IconFont="Download" Text="下载" Enabled="@Model.btQCReport">                                 <Listeners>                                     <f:Listener Event="click" Handler="downLoad('QCReport');"></f:Listener>                                 </Listeners>                             </f:Button>                         </Items>                     </f:FormRow>                     <f:FormRow ColumnWidths="100%">                         <Items>                             <f:FileUpload ID="PhotoContent" Label="拍照留底" AcceptFileTypes="image/*" ButtonIcon="Add" Text="@Model.Photo"></f:FileUpload>                             <f:Button ID="btDelete" Icon="Delete" Text="删除...">                                 <Menu>                                     <f:MenuButton ID="rsPhotoContent" Text="重置上传控件" IconFont="Repeat">                                         <Listeners>                                             <f:Listener Event="click" Handler="reSetPhotoContent();"></f:Listener>                                         </Listeners>                                     </f:MenuButton>                                     <f:MenuButton ID="mbtDeleteP" Text="删除" Enabled="@Model.btPhoto" IconFont="Remove">                                         <Listeners>                                             <f:Listener Event="click" Handler="reMoveFile('P');"></f:Listener>                                         </Listeners>                                     </f:MenuButton>                                 </Menu>                                                             </f:Button>                             <f:Button ID="btDownloadPhoto" IconFont="Download" Text="下载" Enabled="@Model.btPhoto">                                 <Listeners>                                     <f:Listener Event="click" Handler="downLoad('Photo');" ></f:Listener>                                 </Listeners>                             </f:Button>                         </Items>                     </f:FormRow>                     <f:FormRow>                         <Items>                             <f:TextArea For="currentR_QC.Remark" AutoGrowHeight="true" EmptyText="最多500字"></f:TextArea>                         </Items>                     </f:FormRow>                 </Rows>             </f:Form>         </Items>     </f:Panel> } 
@section script {
<script src="~/res/third-party/layDate-v5.2.0laydatelaydate.js" type="text/javascript"></script> <script> function reSetPhotoContent() { var f = F.ui.PhotoContent; f.reset(); } function reSetQCReportContent() { var f = F.ui.QCReportContent; f.reset(); } function reMoveFile(actionType) { F.confirm({ message: '确定删除此文件吗?', target: '_top', ok: function () { // 触发后台事件 F.doPostBack('@Url.Handler("RemoveFile")', 'SimpleForm1',{ actionType: actionType }); } }); } function downLoad(button) { var id = F.ui.currentR_QCID.value; window.location.href = '@Url.Content("~/WH/DownLoad?ID=")' + id + "&button=" + button + "&station=R_QC" ; } F.ready(function () { lay('.dtime').each(function () { laydate.render({ elem: this.getElementsByTagName('input')[0] //this.getElementsByTagName('input')[0] //this.childNodes[1].childNodes[0].childNodes[0] //两种方法均可定位到input元素; , eventElem: this.getElementsByTagName('i')[0] , type: 'datetime' //datetime, , show: false //, trigger: 'click' //, closeStop: '#tbxMyBox-inputEl' , position: 'abolute' //默认值:absolute,绝对定位,始终吸附在绑定元素周围; fixed固定定位,初始吸附在绑定元素周围,不随浏览器滚动条所左右。 , zIndex: 10029 // , theme: 'molv' , calendar: true }); }); }); </script> }

三、数据初始化及上传

1、页面初始化
下载、删除按钮默认不可用;如果记录已存在,上传控件显示文件名,并将下载、删除按钮设置为可用。

public class R_QCModel : BaseAdminModel     {         [BindProperty]         public R_QC currentR_QC { get; set; }         public IEnumerable<User> Users { get; set; }     //检验员、送检员下拉列表;         public int SelectedNodesID { get; set; }           //选择的工序ID         public int currentR_QCID { get; set; }         public string Photo { get; set; }                //文件名称         public string QCReport { get; set; }              //文件名称         public bool btPhoto { get; set; }                 //下载、删除按钮是否启用;         public bool btQCReport { get; set; }              //下载、删除按钮是否启用;          private readonly long _fileSizeLimit=299999;         private readonly string[] _permittedExtensions = { ".txt",".png" ,".jpeg", ".jpg",".gif" };            public async Task<IActionResult> OnGetAsync(int proc)         {             //下载、删除按钮默认不可用;             btPhoto = false;             btQCReport = false;              // 如果记录已存在,上传控件显示文件名,并将下载、删除按钮设置为可用;             R_QC _currentR_QC = new R_QC();             _currentR_QC = await DB.R_QC.Include(q => q.SQC).Include(q => q.QC).             Where(p => p.POProcID == proc).FirstOrDefaultAsync();              if (_currentR_QC != null)             {                 currentR_QC = _currentR_QC;                 QCReport=_currentR_QC.QCReport;                 Photo= _currentR_QC.Photo;                 currentR_QCID = _currentR_QC.ID;                  if (_currentR_QC.QCReportContent!=null)                 {                     btQCReport = true;                 }                 if (_currentR_QC.PhotoContent!=null)                 {                     btPhoto = true;                 }              }             SelectedNodesID = proc;             Users = await DB.Users.ToListAsync();                         return Page();         }     }

2、数据、文件上传后端代码

 public async Task<IActionResult> OnPostBtnSaveClose_ClickAsync(string currentR_QCRProcID, string currentR_QCID, List<IFormFile> QCReportContent,List<IFormFile> PhotoContent)         {             //ModelState.Remove("currentR_QC.ID");              if (ModelState.IsValid)             {                                                  var _r = await DB.R_QC.Include(q => q.SQC).Include(q => q.QC).Where(q=>q.ID== Convert.ToInt32(currentR_QCID)).SingleOrDefaultAsync();                  //_r 不为空,则更新;                 if (_r != null)                 {                     if (await TryUpdateModelAsync<R_QC>(_r, "currentR_QC"                         ,r => r.SQCID                         , r => r.QCID                         ,r=>r.StartTime                         ,r=>r.EndTime                         ,r=>r.PFinishTime                         ,r=>r.QCResult                         ,r=>r.Remark                         )                         )                     {                         //文件                         foreach (var formFile in QCReportContent)                         {                             var formFileContent =                                 await FileHelpers.ProcessFormFile<BufferedMultipleFileUploadDb>(                                     formFile, ModelState, _permittedExtensions,                                     _fileSizeLimit);                              //// Perform a second check to catch ProcessFormFile method                             //// violations. If any validation check fails, return to the                             //// page.                             if (!ModelState.IsValid)                             {                                 //Alert.Show( "请上传正确格式的文件!");                                 return UIHelper.Result();                             }                              _r.QCReportContent = formFileContent;                             _r.QCReport = formFile.FileName;                         }                         foreach (var formFile in PhotoContent)                         {                             var formFileContent =                                 await FileHelpers.ProcessFormFile<BufferedMultipleFileUploadDb>(                                     formFile, ModelState, _permittedExtensions,                                     _fileSizeLimit);                              if (!ModelState.IsValid)                             {                                 //Alert.Show( "请上传正确格式的文件!");                                 return UIHelper.Result();                             }                              _r.PhotoContent = formFileContent;                             _r.Photo = formFile.FileName;                         }                     }                  }                 else  //如果记录不存在,则新增记录;                 {                     currentR_QC.POProcID = Convert.ToInt32(currentR_QCRProcID);                     currentR_QC.OperatorID = (int)GetIdentityID();                     currentR_QC.CreateTime = DateTime.Now;                     currentR_QC.StatusID = 6;                      foreach (var formFile in QCReportContent)                     {                         var formFileContent =                                await FileHelpers.ProcessFormFile<BufferedMultipleFileUploadDb>(                                    formFile, ModelState, _permittedExtensions,                                    _fileSizeLimit);                          if (!ModelState.IsValid)                         {                             //Alert.Show( "请上传正确格式的文件!");                             return UIHelper.Result();                         }                          currentR_QC.QCReportContent = formFileContent;                         currentR_QC.QCReport = formFile.FileName;                     }                      foreach (var formFile in PhotoContent)                     {                         var formFileContent =                             await FileHelpers.ProcessFormFile<BufferedMultipleFileUploadDb>(                                 formFile, ModelState, _permittedExtensions,                                 _fileSizeLimit);                          if (!ModelState.IsValid)                         {                             //Alert.Show( "请上传正确格式的文件!");                             return UIHelper.Result();                         }                          currentR_QC.PhotoContent = formFileContent;                         currentR_QC.Photo = formFile.FileName;                     }                      DB.R_QC.Add(currentR_QC);                 }                 await DB.SaveChangesAsync();                 // 关闭本窗体(触发窗体的关闭事件)                 ActiveWindow.HidePostBack();             }             return UIHelper.Result();         }

public class BufferedMultipleFileUploadDb { [Required] [Display(Name = "File")] public List<IFormFile> FormFiles { get; set; } [Display(Name = "Note")] [StringLength(50, MinimumLength = 0)] public string Note { get; set; } }

四、文件下载及文件删除

 1、文件下载后端代码

文件下载,采用跳转页面方式进行。

  • 创建下载页面,页面名称:Download.cshtml
@page @model XXX.Pages.WH.DownloadModel  @section body{  <h2>下载出错,文件不存在或已被删除!</h2> }

public class DownloadModel : BaseAdminModel     {         public async Task<IActionResult> OnGetAsync(int ID,string station,string button)         {             if (ID != 0)             {                 if (station == "R_QC")                 {                     var requestFile = await DB.R_QC.SingleOrDefaultAsync(q => q.ID == ID);                     if (requestFile == null)                     {                         return Page();                     }                      if (button == "Photo")                     {                         if (requestFile.PhotoContent == null)                         {                             return Page();                         }                         return File(requestFile.PhotoContent, MediaTypeNames.Application.Octet, requestFile.Photo);                     }                     if (button == "QCReport")                     {                         if (requestFile.QCReportContent == null)                         {                             return Page();                         }                         return File(requestFile.QCReportContent, MediaTypeNames.Application.Octet, requestFile.QCReport);                     }                 }                  else if (button == "R_QC_Photo")                 {                  }              }              return Page();         }     }

  • 执行下载

文件上传到数据库与下载

2、文件删除后端代码

 //删除已上传的文件         public async Task<IActionResult>OnPostRemoveFileAsync(string actionType,string currentR_QCID)         {             var _r = await DB.R_QC.Where(p => p.ID == Convert.ToInt32(currentR_QCID)).SingleOrDefaultAsync();             if (_r == null)             {                 Alert.Show("文件已删除!");                 return UIHelper.Result();             }              if (actionType == "Q")             {                 _r.QCReportContent = null;                 _r.QCReport = null;                 //更新前端控件                 UIHelper.FileUpload("QCReportContent").Text("");                 UIHelper.Button("btDownloadQCRep").Enabled(false);                 UIHelper.MenuButton("mbtDeleteQ").Enabled(false);             }             if (actionType == "P")             {                 _r.PhotoContent = null;                 _r.Photo = null;                 //更新前端控件                 UIHelper.FileUpload("PhotoContent").Text("");                 UIHelper.Button("btDownloadPhoto").Enabled(false);                 UIHelper.MenuButton("mbtDeleteP").Enabled(false);             }              await DB.SaveChangesAsync();                         return UIHelper.Result();         }

以上是本文全部内容。

赞(0) 打赏
未经允许不得转载:张拓的天空 » 文件上传到数据库与下载
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏