在之前的文章中也有类似带进度条文件传送的案例，大家可以翻阅之前的文章对知识点进行扩充。
部分代码：
<%@ 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 href="https://www.jb51.net/_assets/css/progress.css" mce_href="https://www.jb51.net/_assets/css/progress.css" /> <link href="https://www.jb51.net/_assets/css/upload.css" mce_href="https://www.jb51.net/_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 runat="server"> <asp: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> <h3>文件上传</h3> <div> <iframe frameborder="0" scrolling="no" src="https://www.jb51.net/Upload.aspx" mce_src="https://www.jb51.net/Upload.aspx"></iframe> <mb:ProgressControl runat="server" CssClass="lightblue" mce_style="display:none" Value="0" Mode="Manual" Speed=".4" /> <div> <div>请选择要上传的文件</div> <div> <input type="button" value="上传" /> </div> </div> </div> </div> </div> </form> </body> </html>
upload.aspx: