【完整示例文件下载】文件上传 带进度条 多种风格 非常漂亮！

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

部分代码：

1. <form id="form1" runat="server"> 
2.    <asp:ScriptManager ID="scriptManager" runat="server" EnablePageMethods="true" /> 
3.      
4.    <script type="text/javascript"> 
5.        var intervalID = 0;  
6.        var progressBar;  
7.        var fileUpload;  
8.        var form;         
9.        // 进度条        
10.        function pageLoad(){             
11.            $addHandler($get('upload'), 'click', onUploadClick);  
12.            progressBar = $find('progress');  
13.        }  
14.        // 注册表单         
15.        function register(form, fileUpload){              
16.            this.form = form;  
17.            this.fileUpload = fileUpload;  
18.        }          
19.        //上传验证  
20.        function onUploadClick() {          
21.            var vaild = fileUpload.value.length > 0;  
22.            if(vaild){                
23.                $get('upload').disabled = 'disabled';               
24.                updateMessage('info', '初始化上传...');                  
25.                //提交上传  
26.                form.submit();                  
27.                // 隐藏frame  
28.                Sys.UI.DomElement.addCssClass($get('uploadFrame'), 'hidden');  
29.                // 0开始显示进度条  
30.                progressBar.set_percentage(0);  
31.                progressBar.show();             
32.                // 上传过程  
33.                intervalID = window.setInterval(function(){  
34.                    PageMethods.GetUploadStatus(function(result){  
35.                        if(result){  
36.                            //  更新进度条为新值  
37.                            progressBar.set_percentage(result.percentComplete);  
38.                            //更新信息  
39.                            updateMessage('info', result.message);  
40.                              
41.                            if(result == 100){  
42.                                // 自动消失  
43.                                window.clearInterval(intervalID);                          
44.                            }  
45.                        }  
46.                    });  
47.                }, 500);                  
48.            }  
49.            else{  
50.                onComplete('error', '您必需选择一个文件');  
51.            }  
52.        }         
53.      
54.        function onComplete(type, msg){  
55.            // 自动消失  
56.            window.clearInterval(intervalID);  
57.            // 显示消息  
58.            updateMessage(type, msg);  
59.            // 隐藏进度条  
60.            progressBar.hide();  
61.            progressBar.set_percentage(0);  
62.            // 重新启用按钮  
63.            $get('upload').disabled = '';  
64.            //  显示frame  
65.            Sys.UI.DomElement.removeCssClass($get('uploadFrame'), 'hidden');  
66.        }          
67.        function updateMessage(type, value){  
68.            var status = $get('status');  
69.            status.innerHTML = value;  
70.            // 移除样式  
71.            status.className = '';  
72.            Sys.UI.DomElement.addCssClass(status, type);  
73.        }  
74.      
75.    </script> 
76.      
77.    <div> 
78.        <div class="upload"> 
79.            <h3>文件上传</h3> 
80.            <div> 
81.                <iframe id="uploadFrame" frameborder="0" scrolling="no" src="Upload.aspx"></iframe> 
82.                <mb:ProgressControl ID="progress" runat="server" CssClass="lightblue" style="display:none" Value="0" Mode="Manual" Speed=".4" Width="100%" /> 
83.                <div> 
84.                    <div id="status" class="info">请选择要上传的文件</div> 
85.                    <div class="commands"> 
86.                        <input id="upload" type="button" value="上传" />   
87.                    </div> 
88.                </div> 
89.            </div> 
90.        </div>   
91.        
92.    </div> 
93.    </form> 

upload.aspx:

1. if (this.IsPostBack)  
2. {  
3.     UploadInfo uploadInfo = this.Session["UploadInfo"] as UploadInfo;  
4.     if (uploadInfo == null)  
5.     {  
6.         // 让父页面知道无法处理上传  
7.         const string js = "window.parent.onComplete('error', '无法上传文件。请刷新页面，然后再试一次);";  
8.         ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", js, true);  
9.     }  
10.     else 
11.     {  
12.         //  让服务端知道我们还没有准备好..  
13.         uploadInfo.IsReady = false;  
14.  
15.         //  上传验证  
16.         if (this.fileUpload.PostedFile != null && this.fileUpload.PostedFile.ContentLength > 0  
17.  
18.             && this.fileUpload.PostedFile.ContentLength < 1048576)//  限制1M  
19.         {  
20.             //  设置路径  
21.             string path = this.Server.MapPath(@"Uploads");  
22.             string fileName = Path.GetFileName(this.fileUpload.PostedFile.FileName);  
23.  
24.             // 上传信息  
25.             uploadInfo.ContentLength = this.fileUpload.PostedFile.ContentLength;  
26.             uploadInfo.FileName = fileName;  
27.             uploadInfo.UploadedLength = 0;  
28.  
29.            //文件存在 初始化...  
30.             uploadInfo.IsReady = true;  
31.  
32.            //缓存  
33.             int bufferSize = 1;  
34.             byte[] buffer = new byte[bufferSize];  
35.  
36.             // 保存字节  
37.             using (FileStream fs = new FileStream(Path.Combine(path, fileName), FileMode.Create))  
38.             {                           
39.                 while (uploadInfo.UploadedLength < uploadInfo.ContentLength)  
40.                 {  
41.                    //从输入流放进缓冲区  
42.                     int bytes = this.fileUpload.PostedFile.InputStream.Read(buffer, 0, bufferSize);  
43.                     // 字节写入文件流  
44.                     fs.Write(buffer, 0, bytes);  
45.                     //  更新大小  
46.                     uploadInfo.UploadedLength += bytes;  
47.  
48.                     //  线程睡眠 上传就更慢 这样就可以看到进度条了  
49.                     System.Threading.Thread.Sleep(100);  
50.                 }  
51.             }  
52.  
53.             // 删除.  
54.             File.Delete(Path.Combine(path, fileName));  
55.  
56.             //   让父页面知道已经处理上传完毕  
57.             const string js = "window.parent.onComplete('success', '{0} 已成功上传');";  
58.             ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", string.Format(js, fileName), true);  
59.         }  
60.         else 
61.         {  
62.             if (this.fileUpload.PostedFile.ContentLength >= 1048576)//1M  
63.             {  
64.                 const string js = "window.parent.onComplete('error', '超出上传文件限制大小，请重新选择');";  
65.                 ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", js, true);  
66.             }  
67.             else 
68.             {  
69.                 const string js = "window.parent.onComplete('error', '上传文件出错');";  
70.                 ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", js, true);  
71.             }  
72.         }                    
73.         uploadInfo.IsReady = false;  
74.     }  
75. }