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

柔光的暖阳◎ 2022-08-26 11:15 256阅读 0赞

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

![asp.net实现文件上传带进度条（多种风格）][asp.net]

![0_1274326725mk2m.gif][]

![0_12743267345554.gif][]

![0_12743267391nBZ.gif][]

![0_12743267808860.gif][]

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

![0_1274326802Do5Z.gif][]

![0_1274326805EP9D.gif][]

![0_1274326809ZIZG.gif][]

![0_1274326812vTWp.gif][]

部分代码：

**\[c-sharp\]**  [view plain][] [copy][view plain]

1.  <%@ Page Language="C\#" %>  
2.  <%@ Register Assembly="MattBerseth.WebControls.AJAX" Namespace="MattBerseth.WebControls.AJAX.Progress" TagPrefix="mb" %>  
3.    
4.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
5.    
6.  <html xmlns="http://www.w3.org/1999/xhtml">  
7.  <head runat="server">  
8.      <title>Untitled Page</title>  
9.      <link rel="Stylesheet" href="\_assets/css/progress.css" mce\_href="\_assets/css/progress.css" />  
10.     <link rel="Stylesheet" href="\_assets/css/upload.css" mce\_href="\_assets/css/upload.css" />  
11.     <mce:style type="text/css"></mce:style><style type="text/css" mce\_bogus="1">        BODY\{ font-family:Arial, Sans-Serif; font-size:12px;\}  
15.     </style>  
16.     <mce:script type="text/C\#" runat="server"></mce:script>  
54. </head>  
55. <body>  
56.     <form id="form1" runat="server">  
57.     <asp:ScriptManager ID="scriptManager" runat="server" EnablePageMethods="true" />  
58.       
59.     <mce:script type="text/javascript"></mce:script>  
132.       
133.     <div>  
134.         <div **class**="upload">  
135.             <h3>文件上传</h3>  
136.             <div>  
137.                 <iframe id="uploadFrame" frameborder="0" scrolling="no" src="Upload.aspx" mce\_src="Upload.aspx"></iframe>  
138.                 <mb:ProgressControl ID="progress" runat="server" CssClass="lightblue" style="display:none" mce\_style="display:none" Value="0" Mode="Manual" Speed=".4" Width="100%" />  
139.                 <div>  
140.                     <div id="status" **class**="info">请选择要上传的文件</div>  
141.                     <div **class**="commands">  
142.                         <input id="upload" type="button" value="上传" />   
143.                     </div>  
144.                 </div>  
145.             </div>  
146.         </div>   
147.         
148.     </div>  
149.     </form>  
150. </body>  
151. </html>

upload.aspx:

**\[c-sharp\]**  [view plain][] [copy][view plain]

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

[asp.net]: /images/20220824/a34d033882f14ff78b8c791e848ed8ab.png
[0_1274326725mk2m.gif]: /images/20220824/9099e26c67114af7874d61066a542ffc.png
[0_12743267345554.gif]: /images/20220824/8ebb5c8694fd4717abe54af72f1263e6.png
[0_12743267391nBZ.gif]: /images/20220824/96493c85889643af9c7c23436d09f00b.png
[0_12743267808860.gif]: /images/20220824/71c49a23d6e94840a1121848bac414f6.png
[0_1274326802Do5Z.gif]: /images/20220824/de67a28778c94a16939c8f99b4521f05.png
[0_1274326805EP9D.gif]: /images/20220824/bbc9788e989448aa800495f68bdc684a.png
[0_1274326809ZIZG.gif]: /images/20220824/d1ed699316fb44d3afff277bbebd3f46.png
[0_1274326812vTWp.gif]: /images/20220824/b622d0195d0d4db18631e9f3449a9a61.png
[view plain]: http://blog.csdn.net/jy5212/article/details/5610701#