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

先饱饱眼福：

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

部分代码：

<%@ 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（）;// 隐藏frameSys.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 = "";// 显示frameSys.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:

//限制大小 1Mprotected 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;}}

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