应用Response.Write实现带有进度条的多文件上传_.Net教程
推荐:asp.net用cookie保存用户密码自动登录本文来学习一下如何在asp.net中用cookie保存用户的帐户密码实现自动登录的功能,强调一下,cookie在客户端保存,是不安全的,推荐使用md5加密保存。 asp.net 中,使用cookie保存账号密码、自动登录 创建cookie //向客户端写入Cookie HttpCookie hcUserName1 = new Http
本教程来学习asp.net利用RESPONSE.WRITE的这个特性实现上传文件时实时进度的显示,本文的学习重点是asp.net页面的生命周期中前后台的交互。
前几天,写过一篇随笔“使用RESPONSE.WRITE实现在页面的生命周期中前后台的交互”。说是交互,实际上也主要是在ASP.NET的页面周期中从后台利用RESPONSE.WRITE向前台即时的推送内容。
该篇随笔算是对上一篇文章的实际应用,利用RESPONSE.WRITE的这个特性实现上传文件时实时进度的显示。如对RESPONSE.WRITE/RESPONSE.FLUSH不甚了解,可以先百度一下。
提前声明一点,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 = 0; 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 = 0; 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来实现的。在文件的读取过程中,实时的进度
也通过该方法更新到前端。
分享:asp.net如何将后台c#数组传给前台js?如何把后台的c#数组传给前端的js,所以这个问题困扰了很久,后来在一篇文章中看到解决办法,文章中的方法处理的是定长数组,我现在处理的是不定长的,所以我又在文章的基础上修改了一下。自己亲自的实践了一下并应用在自己的程序中,果然解决了问题。现在结合大牛的文
- asp.net用cookie保存用户密码自动登录
- asp.net如何将后台c#数组传给前台js?
- VC++根据explorer.exe进程检测用户是否已登录
- ASP.NET从客户端中检测到有潜在危险的request.form值的3种解决方法
- ASP.NET WebForm中%=%>与%#%>的区别
- 浅谈ASP.NET中最简单的自定义控件
- .net中webconfig 详解
- ASP.NET抓取网页内容的实现方法
- ASP.Net下载大文件的实现方法
- Asp.net获取服务器指定文件夹目录文件并提供下载的方法
- ASP.NET.4.5.1+MVC5.0设置系统角色与权限
- 使用ASP.NET.4.5.1+MVC5.0 搭建一个包含 Ninject框架 项目
- 相关链接:
- 教程说明:
.Net教程-应用Response.Write实现带有进度条的多文件上传。