应用Response.Write实现带有进度条的多文件上传
前几天，写过一篇随笔“使用RESPONSE.WRITE实现在页面的生命周期中前后台的交互”。说是交互，实际上也主要是在ASP.NET的页面周期中
从后台利用RESPONSE.WRITE向前台即时的推送内容。
该篇随笔算是对上一篇文章的实际应用，利用RESPONSE.WRITE的这个特性实现上传文件时实时进度的显示。如对
RESPONSE.WRITE/RESPONSE.FLUSH不甚了解，请先移步这里。
先附上示例代码MultiUploadProgressClassic。
提前声明一点，HTML发展到5，使用web API及jQuery upload插件能很好的实现很炫的上传进度条效果。但该随笔只针对那些不能支持HTML5
的浏览器，如IE8及以下，而又不想借助于Flash等来实现的场景。你也可以说今天要描述的方法有些过时了。至于HTML5下实现的方法，本人
近期有时间会另写一篇随笔。
言归正传。
我们要实现的页面的基本布局是这样的。
上传开始，便显示每文件的实时进度。如下图。
上传结束后，再次恢复页面基本布局。
在HTML5之前，通过web file控件上传的文件只有同步post到server端才可以被识别和读取。在此之前，client端是无法知晓文件内容的。所
以，文件上传的真实状态只能从后台传递到前端显示，这时，我们就要借助RESPONSE.WRITE了。
首先，在文件真正的被server端读取之前，要根据上传的情况向前端绘制初始进度（0%）。其次，在读取的过程中，周期性向前端推送进度
情况。主流程如下。
上传文件的初始进度
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 = ; i < fileCollection.Count; i++)
{
string strProgressBarId = "progressBar" + i;
string strPercentageId = "percentage" + i;
string fileName = fileCollection[i].FileName;
sbProgress.Append("<tr><td>");
sbProgress.Append("<p style = 'float:left; margin-left:0px; margin-right:10px;'>" + fileName + "</p>");
sbProgress.Append("<div style='background-color:White; width: 100px;height:12px; border-color:Black;border-width:thin;border-style:solid;float:left; margin-left:0px; margin-right:10px'>");
sbProgress.Append("<div style='background-color:Green;height:12px;' id='" + strProgressBarId + "' ></div></div>");
sbProgress.Append("<p float:left; margin-left:0px; margin-right:10px;'><div id='" + strPercentageId + "'></div></p>");
sbProgress.Append("</td></tr>");
}
sbProgress.Append("</table>");
for (int i = ; i < fileCollection.Count; i++)
{
sbProgress.Append("<script type='text/javascript'> SetProgressBarProgressAmount(" + i + ",0 );</script>");
}
sbProgress.Append("</body></html>"); HttpContext.Current.Response.Write(sbProgress.ToString());
HttpContext.Current.Response.Flush(); //强制输出内容
}
初始进度绘制
文件进度更新
从上面的代码段可以看出，设置上传进度值是通过调用js方法SetProgressBarProgressAmount来实现的。在文件的读取过程中，实时的进度
也通过该方法更新到前端。
public static void setProgressBar(int id, string progressAmount)
{
StringBuilder sb = new StringBuilder();
sb.Append("<body><script type='text/javascript'>SetProgressBarProgressAmount(" + id + ",'" + progressAmount + "'); </script></body>"); HttpContext.Current.Response.Write(sb.ToString());
HttpContext.Current.Response.Flush();
}
实时进度更新
更新进度方法是每读取完一定大小的文件内容后执行一次。
while ((tripDownloadSize = stream.Read(b, , bufferSize)) > )
{
fs.Write(b, , tripDownloadSize);
totalDownloadedSize += tripDownloadSize;
Percentage = (int)(totalDownloadedSize * ) / totalUploadSize;
setProgressBar(id, Percentage.ToString()); //更新进度
System.Threading.Thread.Sleep();
}
调用进度更新
最后，还有一点需要说明一下。我们把包含web file控件的区域放到一个新的页面里，并通过Iframe引用。这样做是为避免每次都post整个
页面。
好了，本篇完结。
应用Response.Write实现带有进度条的多文件上传的更多相关文章
- python实现进度条--主要用在上传下载文件
在python中进行socket上传文件的时候使用进度条,然后在网上找了好久,找寻相关的进度的条的使用,看了几个,发现总是无法进行调用,主要原因是在进行上传文件的时候,每次传送的数据量是固定的,数据的 ...
- DJANGO和UIKIT结合，作一个有进度条的无刷新上传功能
以前作的上传,在糙了,所以在用户体验上改进一下. 同时,结合DJANGO作定位上传. 这其中分两步进行,第一次上传到TMP目录下, 第二次,将TMP下的文件转移到标准目录下. form.py file ...
- HTML5矢量实现文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
- 基于HT for Web矢量实现HTML5文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
- PHP中使用Session配合Javascript实现文件上传进度条功能
Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...
- springboot带有进度条的上传
一.说明 最近要做文件上传,在网上找了很久都没有一个全面的示例,特此记录下来分享给大家. 1.文件上传接口可按照springboot默认实现,也可用commons-fileupload组件,本示例使用 ...
- jQuery.uploadify-----文件上传带进度条，支持多文件上传的插件
借鉴别人总结的uploadify:基于jquery的文件上传插件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,控制文件上传大小,删除已上传文件. uploadify有两个版本,一个用f ...
- atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7
atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...
- atitit. 文件上传带进度条 atiUP 设计 java c# php
atitit. 文件上传带进度条 atiUP 设计 java c# php 1. 设计要求 1 2. 原理and 架构 1 3. ui 2 4. spring mvc 2 5. springMVC.x ...
随机推荐
- 协作开发中常用的Git命令小结
先提一下最基础的git命令用法: git clone 从远端克隆到本地仓库 git add . (注意add和. 之间有一个空格)将全部改动添加到暂存区 git checkout xxx 撤销更改 ...
- 『C++』Temp_2018_12_13 函数指针
#include <iostream> #include <string> using namespace std; class Test{ private: string n ...
- 2018 Wannafly summer camp Day8--连通块计数
连通块计数 描述 题目描述: 小 A 有一棵长的很奇怪的树,他由 n 条链和 1 个点作为根构成,第 i条链有 ai 个点,每一条链的一端都与根结点相连. 现在小 A 想知道,这棵长得奇怪的树有多少 ...
- mysql使用数据库
哈哈 只能怪自己太菜哈 刚接触这个MySQL没多久 今天用终端登陆MySQL的时候mysql -u root -p 然后就想看看自己的数据库 我用的MySQL的客户端是navicat for mysq ...
- vue 整体引入 mint-ui 样式失败
当引入Mint-ui 整体css 时 如果出现了这样的错误, 是指找不到对应的Mint-UI 的css :需要从node_modules里寻找 解决方法是在webpack.config.js(有的项目 ...
- nginx知识总结
nginx知识总结 一.功能 负载均衡 反向代理 静态资源服务器 二.来源 nginx 俄罗斯第二网站开源项目 tengine 淘宝团队基于nginx开发的 区别:nginx安装之后还得装第三方软件包 ...
- ASA 5.0/8.0/9.0 杂记
ASA 10.0 之前的版本都是使用odbc方式连接,由于某个项目的需求,无奈学习一下这些老掉牙的技巧. 1.新建 数据源 (不会的话,自行搜索一下) 2.使用 快捷方式 或者 其他方式 执行 C:\ ...
- python爬虫#数据存储#JSON/CSV/MYSQL/MongoDB/
Json数据处理 JSON支持数据格式: 对象(字典).使用花括号. 数组(列表).使用方括号. 整形.浮点型.布尔类型还有null类型. 字符串类型(字符串必须要用双引号,不能用单引号). 多个数据 ...
- Python值集合操作
list_l1 = [12,1,4,6,9,5,4,2,11] list_l1 = set(list_l1) print(list_l1,type(list_l1)) #集合也是无序的 list_2 ...
- C语言Windows程序开发—MessageBox函数介绍【第01天】
(一)MessageBox函数的参数介绍: int MessageBox ( HWND hWnd, //弹出MessageBox对话框所属的窗口句柄 LPCTSTR lpText, //指向Messa ...