ASP.NET 用ProgressBar来显示文件上传进度

junwong 发布于 2012/07/23 11:27
阅读 5K+
收藏 18
配套代码:
介绍
今天我们将介绍如何用 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



原文链接 , OSChina.NET 原创翻译
加载中
0
笨蛋EGG
笨蛋EGG
没有IE6还是再过一段时间在用····
0
北落
北落
好多js的做的不错了
0
十年之后
十年之后
纯ASP.NET的实现,以满足不了我们了。我现在都是用ashx+js来自定义上传组件。这样自定性强。
0
书童张智

脚本我不做评价

但是实际上你显示的并不是上传进度,而是从ASP.Net本地缓冲(可能来自于内存、临时文件)写入到你的磁盘文件的进度。因为在你尝试访问到PostedFile的时候请求的数据就已经全部接受完毕了并且已经填充到文件集合。PostedFile本身仅仅维护一些位置指针而已。

0
h
hautbbs
楼上大牛,学习了!
0
MapleJIn
MapleJIn
没资格评论,学习!
0
aspboy
aspboy

不错,有jsp版本的吗?

返回顶部
顶部