asp.net文件上传带进度条实现案例（多种风格）

2024-12-03 18:34:43

先饱饱眼福：

在之前的文章中也有类似带进度条文件传送的案例，大家可以翻阅之前的文章对知识点进行扩充。

部分代码：

<%@ Page Language="C#" %>
<%@ Register Assembly="MattBerseth.WebControls.AJAX" Namespace="MattBerseth.WebControls.AJAX.Progress" TagPrefix="mb" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>Untitled Page</title>
 <link rel="Stylesheet" href="_assets/css/progress.css" mce_href="_assets/css/progress.css" />
 <link rel="Stylesheet" href="_assets/css/upload.css" mce_href="_assets/css/upload.css" />
 <mce:style type="text/css"><!--
 BODY{ font-family:Arial, Sans-Serif; font-size:12px;} 

--></mce:style><style type="text/css" mce_bogus="1"> BODY{ font-family:Arial, Sans-Serif; font-size:12px;}
 </style>
 <mce:script type="text/C#" runat="server"><!-- 

 protected void Page_Load(object sender, EventArgs args)
 {
 if (!this.IsPostBack)
 {
 this.Session["UploadInfo"] = new UploadInfo { IsReady = false };
 }
 } 

 /// <summary>
 ///
 /// </summary>
 [System.Web.Services.WebMethod]
 [System.Web.Script.Services.ScriptMethod]
 public static object GetUploadStatus()
 {
 //获取文件长度
 UploadInfo info = HttpContext.Current.Session["UploadInfo"] as UploadInfo; 

 if (info != null && info.IsReady)
 {
 int soFar = info.UploadedLength;
 int total = info.ContentLength; 

 int percentComplete = (int)Math.Ceiling((double)soFar / (double)total * 100);
 string message = string.Format("上传 {0} ... {1} of {2} 字节", info.FileName, soFar, total); 

 // 返回百分比
 return new { percentComplete = percentComplete, message = message };
 } 

 // 还没有准备好...
 return null;
 } 

// --></mce:script>
</head>
<body>
 <form id="form1" runat="server">
 <asp:ScriptManager ID="scriptManager" runat="server" EnablePageMethods="true" /> 

 <mce:script type="text/javascript"><!--
 var intervalID = 0;
 var progressBar;
 var fileUpload;
 var form;
 // 进度条
 function pageLoad(){
 $addHandler($get('upload'), 'click', onUploadClick);
 progressBar = $find('progress');
 }
 // 注册表单
 function register(form, fileUpload){
 this.form = form;
 this.fileUpload = fileUpload;
 }
 //上传验证
 function onUploadClick() {
 var vaild = fileUpload.value.length > 0;
 if(vaild){
 $get('upload').disabled = 'disabled';
 updateMessage('info', '初始化上传...');
 //提交上传
 form.submit();
 // 隐藏frame
 Sys.UI.DomElement.addCssClass($get('uploadFrame'), 'hidden');
 // 0开始显示进度条
 progressBar.set_percentage(0);
 progressBar.show();
 // 上传过程
 intervalID = window.setInterval(function(){
 PageMethods.GetUploadStatus(function(result){
 if(result){
 // 更新进度条为新值
 progressBar.set_percentage(result.percentComplete);
 //更新信息
 updateMessage('info', result.message); 

 if(result == 100){
 // 自动消失
 window.clearInterval(intervalID);
 }
 }
 });
 }, 500);
 }
 else{
 onComplete('error', '您必需选择一个文件');
 }
 } 

 function onComplete(type, msg){
 // 自动消失
 window.clearInterval(intervalID);
 // 显示消息
 updateMessage(type, msg);
 // 隐藏进度条
 progressBar.hide();
 progressBar.set_percentage(0);
 // 重新启用按钮
 $get('upload').disabled = '';
 // 显示frame
 Sys.UI.DomElement.removeCssClass($get('uploadFrame'), 'hidden');
 }
 function updateMessage(type, value){
 var status = $get('status');
 status.innerHTML = value;
 // 移除样式
 status.className = '';
 Sys.UI.DomElement.addCssClass(status, type);
 } 

// --></mce:script> 

 <div>
 <div class="upload">
 <h3>文件上传</h3>
 <div>
 <iframe id="uploadFrame" frameborder="0" scrolling="no" src="Upload.aspx" mce_src="Upload.aspx"></iframe>
 <mb:ProgressControl ID="progress" runat="server" CssClass="lightblue" style="display:none" mce_style="display:none" Value="0" Mode="Manual" Speed=".4" Width="100%" />
 <div>
 <div id="status" class="info">请选择要上传的文件</div>
 <div class="commands">
 <input id="upload" type="button" value="上传" />
 </div>
 </div>
 </div>
 </div> 

 </div>
 </form>
</body>
</html>

upload.aspx:

//限制大小 1M
 protected void Page_Load2(object sender, EventArgs e)
 {
 if (this.IsPostBack)
 {
 UploadInfo uploadInfo = this.Session["UploadInfo"] as UploadInfo;
 if (uploadInfo == null)
 {
 // 让父页面知道无法处理上传
 const string js = "window.parent.onComplete('error', '无法上传文件。请刷新页面，然后再试一次);";
 ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", js, true);
 }
 else
 {
 // 让服务端知道我们还没有准备好..
 uploadInfo.IsReady = false; 

 // 上传验证
 if (this.fileUpload.PostedFile != null && this.fileUpload.PostedFile.ContentLength > 0 

 && this.fileUpload.PostedFile.ContentLength < 1048576)// 限制1M
 {
 // 设置路径
 string path = this.Server.MapPath(@"Uploads");
 string fileName = Path.GetFileName(this.fileUpload.PostedFile.FileName); 

 // 上传信息
 uploadInfo.ContentLength = this.fileUpload.PostedFile.ContentLength;
 uploadInfo.FileName = fileName;
 uploadInfo.UploadedLength = 0; 

 //文件存在 初始化...
 uploadInfo.IsReady = true; 

 //缓存
 int bufferSize = 1;
 byte[] buffer = new byte[bufferSize]; 

 // 保存字节
 using (FileStream fs = new FileStream(Path.Combine(path, fileName), FileMode.Create))
 {
 while (uploadInfo.UploadedLength < uploadInfo.ContentLength)
 {
 //从输入流放进缓冲区
 int bytes = this.fileUpload.PostedFile.InputStream.Read(buffer, 0, bufferSize);
 // 字节写入文件流
 fs.Write(buffer, 0, bytes);
 // 更新大小
 uploadInfo.UploadedLength += bytes; 

 // 线程睡眠 上传就更慢 这样就可以看到进度条了
 System.Threading.Thread.Sleep(100);
 }
 } 

 // 删除.
 File.Delete(Path.Combine(path, fileName)); 

 // 让父页面知道已经处理上传完毕
 const string js = "window.parent.onComplete('success', '{0} 已成功上传');";
 ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", string.Format(js, fileName), true);
 }
 else
 {
 if (this.fileUpload.PostedFile.ContentLength >= 1048576)//1M
 {
 const string js = "window.parent.onComplete('error', '超出上传文件限制大小，请重新选择');";
 ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", js, true);
 }
 else
 {
 const string js = "window.parent.onComplete('error', '上传文件出错');";
 ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", js, true);
 }
 }
 uploadInfo.IsReady = false;
 }
 }
 } 

 // 不限制大小
 protected void Page_Load(object sender, EventArgs e)
 {
 if (this.IsPostBack)
 {
 UploadInfo uploadInfo = this.Session["UploadInfo"] as UploadInfo;
 uploadInfo.IsReady = false;
 if (this.fileUpload.PostedFile != null && this.fileUpload.PostedFile.ContentLength > 0)
 {
 string path = this.Server.MapPath(@"Uploads");
 string fileName = Path.GetFileName(this.fileUpload.PostedFile.FileName); 

 uploadInfo.ContentLength = this.fileUpload.PostedFile.ContentLength;
 uploadInfo.FileName = fileName;
 uploadInfo.UploadedLength = 0; 

 uploadInfo.IsReady = true; 

 int bufferSize = 1;
 byte[] buffer = new byte[bufferSize]; 

 using (FileStream fs = new FileStream(Path.Combine(path, fileName), FileMode.Create))
 {
 while (uploadInfo.UploadedLength < uploadInfo.ContentLength)
 {
 int bytes = this.fileUpload.PostedFile.InputStream.Read(buffer, 0, bufferSize);
 fs.Write(buffer, 0, bytes);
 uploadInfo.UploadedLength += bytes;
 }
 }
 const string js = "window.parent.onComplete('success', '{0} 已成功上传');";
 ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", string.Format(js, fileName), true);
 }
 else
 {
 const string js = "window.parent.onComplete('error', '上传文件出错');";
 ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", js, true);
 }
 uploadInfo.IsReady = false;
 }
 }

代码就不贴完了，直接上干货，亲，这可是免邮的哦！下载地址

ASP.NET实现进度条效果

我们先看下进度条效果我点击了按钮后他会显示进度页面,进度完成后,进度条消失,其实也是比较简单的了. 我们需要一个进度条代码文件ProgressBar.htm(注意:是没有head这些标签的) <script language="javascript"> function SetPorgressBar(pos) { //设置进度条居中 var screenWidth = document.body.offsetWidth; ProgressBarSide.style.wid
asp.net单文件带进度条上传的解决方案

最近做项目中遇到很多问题,比如带进度条的文件上传,看了网上很多资料还没找到真正意义上的ASP.NET实现进度条上传(可能是我没找到),下面我来跟大家分享一下我实现的这个程序. 首先看下界面效果,当然你可以完全修改界面为你自己所用. 先解释一下这个程序,该程序采用了jquery框架,实现了小文件上传,不超过80Mb,可以在web.config文件中进行相应的配置,但是有个最大值,具体需要查看msdn.开发环境采用visual studio 2013 .net framework 4.5,运行的时候
asp.net mvc 实现文件上传带进度条的思路与方法

前言文件上传与下载的操作在实际项目中经常是很重要的一个内容,在使用ASP.NET Web Form的时候我们可以使用诸多的服务器控件,FileIpload就是其中之一,但是在ASP.NET不建议使用那些服务器控件,因为那样违反三层架构原则.最近参考网络资料,学习了ASP.NET MVC如何上传文件. 而这篇文章主要重点是asp.net mvc 实现文件上传带进度条,下面来一起看看吧. 实现思路 ajax异步上传文件,且开始上传文件的时候启动轮询来实时获取文件上传进度.保存进度我采用的是memc
asp.net(c#)开发中的文件上传组件uploadify的使用方法（带进度条）

在Web开发中,有很多可以上传的组件模块,利用HTML的File控件的上传也是一种办法,不过这种方式,需要处理的细节比较多,而且只能支持单文件的操作.在目前Web开发中用的比较多的,可能uploadify(参考http://www.uploadify.com/)也算一个吧,不过这个版本一直在变化,他们的脚本调用也有很大的不同,甚至调用及参数都一直在变化,很早的时候,那个Flash的按钮文字还没法变化,本篇随笔主要根据项目实际,介绍一下3.1版本的uploadify的控件使用,这版本目前还是最新的
asp.net 在客户端显示服务器端任务处理进度条的探讨

下面就是采用静态变量的方法实现的: 复制代码代码如下: <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -transitional.dtd"> <script runat="server"
ASP.NET实现用图片进度条显示投票结果

一个投票功能模块少不了查看投票结果,用进度条显示各个投票结果可以起到一目了然的效果.以下是我的方法,请大家不吝赐教: 1:做一张图片用于做进度条,只需要很小的一个图片就可以了,如高20px,宽1px. 2:在要显示进度条的单元格中插入image控件,其imageUrl设置为已做好的图片的位置. 3:用一个dataReader对象dr保存取出的各项票数,用一个int 型变量sum保存取出的总票数,各项分别再定义一个double型变量用来保存单项票数除以(/)总票数的结果(小数),再定义一个int
asp.net 生成静态页时的进度条显示

asp.net如何生成静态页,请参考下面的文章:http://www.jb51.net/article/18175.htm而我们用模拟的话,只需要让线程延迟执行就可以了.比如下面的代码: 复制代码代码如下: for (int i = 0; i < 10; i++) { DateTime startTime = DateTime.Now; Response.Write(i + "-------------执行时间:" + startTime.ToString()+"&l
利用Asp.Net回调机制实现进度条

其效果如下:首先,在HTML文档中加入如下代码:<div> <table class="statusTable"> <tr> <td id="progress1"> </td> <td id="progress2"> </td> <td id="progress3"> </td> <td id="prog
Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来实现呢?我并不否认"拿来主义",只是我个人更喜欢凡是求个所以然.本篇将阐述通过Html,IHttpHandler和 IHttpAsyncHandler实现文件上传和上传进度的原理,希望对你有多帮助. 效果图: 本文涉及到的知识点:1.前台用到Html,Ajax,JQuery,JQuery UI 2.后台用到一般处理程序(IHttpHandler)和
asp.net web大文件上传带进度条实例代码

复制代码代码如下: using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using Syste

asp.net文件上传带进度条实现案例（多种风格）

相关推荐

随机推荐