ASP.NET 文件上传带进度条

• 下载 FileUploadInDatabase.zip - 326.6 KB
• 下载源码 - 317.9 KB

介绍 

文件上传控件，将显示实时文件上传进度条

背景

这将允许用户上传、下载和删除文件，具有经典的用户界面，并且无需重新加载页面。

Using the Code

上传控件包括以下内容

• 文件上传界面 (Default.aspx)
  • IFRAME（包含上传引擎页面 UploadEngine.aspx）
  • 上传按钮（允许用户在服务器上上传文件）
  • 显示上传文件的统计信息（文件名、状态、进度和传输的字节数）
  • 网格（显示已上传文件的列表）
  • 隐藏字段（它将监视并在文件成功上传到服务器时刷新文件列表）
• 上传引擎 (UploadEngine.aspx)
  • 文件上传控件

页面结构 (Default.aspx)

上传引擎结构 (UploadEngine.aspx)

页面执行流程

在页面加载期间，它将自动注册上传按钮的单击事件。

1. 选择要上传的文件
2. 单击上传按钮（它将自动注册上传按钮的单击事件）
   • 以下函数正在客户端站点上检查基本验证，例如
     • 文件上传不能为空
     • 文件名应该是唯一的
   • 使用 JavaScript 执行 (UploadEngine) 提交事件
   • 在执行 (UploadEngine) 期间，两个进程同时执行
     • 页面将在会话中维护文件上传详细信息，借助 UploadDetail 类
     • 每隔 500 毫秒，PageMethod 将调用并显示当前上传文件的进度，包含大小和百分比值
   • 使用 StartProgress 函数显示连续进度



3. 显示实时进度

   

4. 根据结果更新消息，结果可能来自以下
   成功 信息 警告 错误

   

5. 在服务器端同时执行的两个进程如下
   • 上传引擎

     

   • 默认值

     

6. 在文件上传过程中，将出现以下屏幕

   

7. 网格中还提供以下功能

   

8. 我提供了经典的外观（使用 CSS）和跨浏览器兼容的脚本（使用 JavaScript）。
9. 以下浏览器支持上传控件

   

   更新 - 2 

   我添加了三个新文件，用于将文件保存在数据库中。

   • App_Code 
   1. SaveFile.cs (用于保存文件数据库的逻辑，注意：仅修改数据库连接)
      
   2. Result.cs（这将返回成功或失败以及描述的状态）
      
   • App_Data 
   1. Script.Sql（用于创建表和存储过程的数据库脚本）

   仅修改了一个文件 UploadEngine.aspx.cs

   请在之后添加以下代码

   if (this.fileUpload.PostedFile != null && this.fileUpload.PostedFile.ContentLength > 0) 

    //START : Saving File in Database
                   SaveFile saveFileInDB = new SaveFile();
                   saveFileInDB.FileName = this.fileUpload.PostedFile.FileName;
                   saveFileInDB.FileExtension = Path.GetExtension(this.fileUpload.PostedFile.FileName);
                   saveFileInDB.FileContent = this.fileUpload.FileBytes;
                   Result Result = saveFileInDB.SaveFileInDB();
                   if (Result.IsError == false)
                   {
                       //File Save in Database Successfully!
                   }
                   else
                   {
                       //Error in Saving File in Database!
                       //Error: Result.ErrorMessage
                       //InnerException: Result.InnerException
                       //StackTrace: Result.StackTrace
                   }
                   //END : Saving File in Database

   
   

兴趣点 

现在我将尝试支持多文件上传功能。

历史  

如果您发现其中存在任何问题或错误，请留下评论或给我发送电子邮件。如果您对此有任何注释，也请告诉我，这样我就不必重做您的辛苦工作了。

1.                      初始上传

2.  21-07-12       添加了将上传文件也保存在数据库中的功能

如果这有帮助，请提供一个 "投票"。