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

谁践踏了优雅 2022-05-26 05:36 259阅读 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.  protectedvoid 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. conststring 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 = newbyte\[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. conststring 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. conststring js = "window.parent.onComplete('error', '超出上传文件限制大小，请重新选择');"; 
68.  ScriptManager.RegisterStartupScript(this, typeof(upload\_aspx), "progress", js, true); 
69.  \} 
70. else
71.  \{ 
72. conststring 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. protectedvoid 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 = newbyte\[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. conststring js = "window.parent.onComplete('success', '\{0\} 已成功上传');"; 
112.  ScriptManager.RegisterStartupScript(this, typeof(upload\_aspx), "progress", string.Format(js, fileName), true); 
113.  \} 
114. else
115.  \{ 
116. conststring js = "window.parent.onComplete('error', '上传文件出错');"; 
117.  ScriptManager.RegisterStartupScript(this, typeof(upload\_aspx), "progress", js, true); 
118.  \} 
119.  uploadInfo.IsReady = false; 
120.  \} 
121.  \}

代码就不贴完了 直接[打包下载][Link 1]吧！

[asp.net]: /images/20220526/7402c353b93a47feb55a989c1f023353.png
[0_1274326725mk2m.gif]: /images/20220526/f5be277bd3044b579f39326a21bf5c73.png
[0_12743267345554.gif]: /images/20220526/e97beb5d4e614b5d919a7dfa3adc036d.png
[0_12743267391nBZ.gif]: /images/20220526/e6d4b588910f41798c57bd9bb020ece1.png
[0_12743267808860.gif]: /images/20220526/4c019d56ad514c61b847fd7aad91bad7.png
[0_1274326802Do5Z.gif]: /images/20220526/5f1d084da0374807bd66ce08cdfc10e5.png
[0_1274326805EP9D.gif]: /images/20220526/17c5944b10534029a363bce20ba0212c.png
[0_1274326809ZIZG.gif]: /images/20220526/68acd06947444359ba98aafbc748b859.png
[0_1274326812vTWp.gif]: /images/20220526/f053961a684f4767a16fc3e842701d22.png
[view plain]: https://blog.csdn.net/jy5212/article/details/5610701#
[Link 1]: http://files.cnblogs.com/jy5212/fileupload.rar