首页 > 网站 > 建站经验 > 正文

应用Response.Write实现带有进度条的多文,件上传

2019-11-02 15:04:38
字体:
来源:转载
供稿:网友

 本教程来学习asp.net利用RESPONSE.WRITE的这个特性实现上传文件时实时进度的显示,本文的学习重点是asp.net页面的生命周期中前后台的交互。

  

前几天,写过一篇随笔“使用RESPONSE.WRITE实现在页面的生命周期中前后台的交互”。说是交互,实际上也主要是在ASP.NET的页面周期中从后台利用RESPONSE.WRITE向前台即时的推送内容。

该篇随笔算是对上一篇文章的实际应用,利用RESPONSE.WRITE的这个特性实现上传文件时实时进度的显示。如对RESPONSE.WRITE/R

好听网名[www.la240.com/html2017/1/15/]
ESPONSE.FLUSH不甚了解,可以先百度一下。

提前声明一点,HTML发展到5,使用web API及jQuery upload插件能很好的实现很炫的上传进度条效果。但该随笔只针对那些不能支持HTML5

浏览器,如IE8及以下,而又不想借助于Flash等来实现的场景。你也可以说今天要描述的方法有些过时了。至于HTML5下实现的方法,本人

近期有时间会另写一篇随笔。

言归正传。

我们要实现的页面的基本布局是这样的。

应用Response.Write实现带有进度条的多文件上传  电脑高手

 

上传开始,便显示每文件的实时进度。如下图。

应用Response.Write实现带有进度条的多文件上传

 

上传结束后,再次恢复页面基本布局。

在HTML5之前,通过web file控件上传的文件只有同步post到server端才可以被识别和读取。在此之前,client端是无法知晓文件内容的。所

以,文件上传的真实状态只能从后台传递到前端显示,这时,我们就要借助RESPONSE.WRITE了。

首先,在文件真正的被server端读取之前,要根据上传的情况向前端绘制初始进度(0%)。其次,在读取的过程中,周期性向前端推送进度

情况。主流程如下。

应用Response.Write实现带有进度条的多文件上传

 

上传文件的初始进度

Request.Files携带着文件内容到达了server端,在开始读取之前,通过RESPONSE.WRITE向页面绘制初始状态。

public void CreateProgress(HttpFileCollection fileCollection)
    {
        StringBuilder sbProgress = new StringBuilder();
        sbProgress.Append("<html><head></head>  <body>");       //构造输出内容
        sbProgress.Append("<script src='FilesUpload.js' type='text/javascript'></script><table id='mainTable' border='0'>");
        for (int i = 0; i < fileCollection.Count; i++)
        {
            string strProgressBarId = "progressBar" + i;
            string strPercentageId = "percentage" + i;

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表