英文原文:
ASP.NET File Upload with Progress Bar
配套代码:
介绍
今天我们将介绍如何用 ProgressBar 控件来显示文件上传进度:
背景
目的是为了让用户能够在上传文件能即时查看上传进度以及即时停止上传。
实际代码
所需文件
File Upload interface(Default.aspx)
- IFRAME (包含上传文件的页面 UploadEngine.aspx)
- Upload button (点击后开始上传)
- 显示上传文件流程的状态信息 (文件名,当前状态,上传进度或已上传的字节数)
- 网格 (以列表形式显示上传的文件)
- Hidden field控件 (保存页面视图状态)
Upload Engine(UploadEngine.aspx)
页面结构(Default.aspx)
Upload Engine结构(UploadEngine.aspx)
工作流
在页面加载过程中,为按钮订阅点击的处理事件
1, 选择要上传的文件
2,点击上传按钮后,我们要
1,验证上传的文件不能为空
2,上传的文件名必须唯一
3,执行引擎(UploadEngine)是使用JavaScript的
4,整个过程需要执行两个流程,分别是
1,页面将维持被上传文件的详细信息,我们使用UploadDetail类来处理此事
2,每隔半秒, PageMethod方法将会执行,用以计算当前的上传进度
5,使用方法 StartProgress 来将上传进度的数值以进度条方式显示
3,实时显示进度
4,更新显示的消息

5,服务端的两个流程方法如下:
Upload Engine
Default
6,在上传文件的过程中,你会看到如下图这样:
7,网格列表显示上传文件的代码

8,然后我也做了跨多个浏览器都能显示与使用的CSS与JavaScript.
9,注意今天这个 upload widgets 仅仅支持以下几个浏览器
我添加了三个文件来将上传的文件存储到数据库
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
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
2KB翻译工作遵照
CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

2KB项目(www.2kb.com,源码交易平台),提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务