文件上传带进度条（多种风格）

文件上传带进度条多种风格非常漂亮！

曾祥展

友好的提示以及上传验证！

曾祥展

部分代码：

<form id="form1" runat="server"><asp:ScriptManager ID="scriptManager" runat="server" EnablePageMethods="true" /><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);}</script><div><div class="upload"><h3>文件上传</h3><div><iframe id="uploadFrame" frameborder="0" scrolling="no" src="Upload.aspx"></iframe><mb:ProgressControl ID="progress" runat="server" CssClass="lightblue" 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>

upload.aspx:

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;}
}