首页 > 编程 > .NET > 正文

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

2024-07-10 13:29:20
字体：大 中 小
来源：转载
供稿：网友

这篇文章主要讲解了asp.net文件上传带进度条实现案例，有不同风格的进度条，一定有一款最适合你的。

先饱饱眼福：

在之前的文章中也有类似带进度条文件传送的案例，大家可以翻阅之前的文章对知识点进行扩充。

部分代码：

 

 
  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"><!--  
  12. BODY{ font-family:Arial, Sans-Serif; font-size:12px;}  
  13.  
  14. --></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"><!--  
  17.  
  18. protected void Page_Load(object sender, EventArgs args)  
  19. {  
  20. if (!this.IsPostBack)  
  21. {  
  22. this.Session["UploadInfo"] = new UploadInfo { IsReady = false };  
  23. }  
  24. }  
  25.  
  26. /// <summary>  
  27. ///  
  28. /// </summary>  
  29. [System.Web.Services.WebMethod]  
  30. [System.Web.Script.Services.ScriptMethod]  
  31. public static object GetUploadStatus()  
  32. {  
  33. //获取文件长度  
  34. UploadInfo info = HttpContext.Current.Session["UploadInfo"] as UploadInfo;  
  35.  
  36. if (info != null && info.IsReady)  
  37. {  
  38. int soFar = info.UploadedLength;  
  39. int total = info.ContentLength;  
  40.  
  41. int percentComplete = (int)Math.Ceiling((double)soFar / (double)total * 100);  
  42. string message = string.Format("上传 {0} ... {1} of {2} 字节", info.FileName, soFar, total);  
  43.  
  44. // 返回百分比  
  45. return new { percentComplete = percentComplete, message = message };  
  46. }  
  47.  
  48. // 还没有准备好...  
  49. return null;  
  50. }  
  51.  
  52.  
  53. // --></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"><!--  
  60. var intervalID = 0;  
  61. var progressBar;  
  62. var fileUpload;  
  63. var form;  
  64. // 进度条  
  65. function pageLoad(){  
  66. $addHandler($get('upload'), 'click', onUploadClick);  
  67. progressBar = $find('progress');  
  68. }  
  69. // 注册表单  
  70. function register(form, fileUpload){  
  71. this.form = form;  
  72. this.fileUpload = fileUpload;  
  73. }  
  74. //上传验证  
  75. function onUploadClick() {  
  76. var vaild = fileUpload.value.length > 0;  
  77. if(vaild){  
  78. $get('upload').disabled = 'disabled';  
  79. updateMessage('info', '初始化上传...');  
  80. //提交上传  
  81. form.submit();  
  82. // 隐藏frame  
  83. Sys.UI.DomElement.addCssClass($get('uploadFrame'), 'hidden');  
  84. // 0开始显示进度条  
  85. progressBar.set_percentage(0);  
  86. progressBar.show();  
  87. // 上传过程  
  88. intervalID = window.setInterval(function(){  
  89. PageMethods.GetUploadStatus(function(result){  
  90. if(result){  
  91. // 更新进度条为新值  
  92. progressBar.set_percentage(result.percentComplete);  
  93. //更新信息  
  94. updateMessage('info', result.message);  
  95.  
  96. if(result == 100){  
  97. // 自动消失  
  98. window.clearInterval(intervalID);  
  99. }  
  100. }  
  101. });  
  102. }, 500);  
  103. }  
  104. else{  
  105. onComplete('error', '您必需选择一个文件');  
  106. }  
  107. }  
  108.  
  109. function onComplete(type, msg){  
  110. // 自动消失  
  111. window.clearInterval(intervalID);  
  112. // 显示消息  
  113. updateMessage(type, msg);  
  114. // 隐藏进度条  
  115. progressBar.hide();  
  116. progressBar.set_percentage(0);  
  117. // 重新启用按钮  
  118. $get('upload').disabled = '';  
  119. // 显示frame  
  120. Sys.UI.DomElement.removeCssClass($get('uploadFrame'), 'hidden');  
  121. }  
  122. function updateMessage(type, value){  
  123. var status = $get('status');  
  124. status.innerHTML = value;  
  125. // 移除样式  
  126. status.className = '';  
  127. Sys.UI.DomElement.addCssClass(status, type);  
  128. }  
  129.  
  130.  
  131. // --></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:

 

 
  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中调用oracle存储过程的方法

下一篇：.net从服务器下载文件中文名乱码解决方案

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
学习交流
更多

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...
热门图片
更多
猜你喜欢的新闻
猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分
2024-06-26 22:28:41
650分！高二女生考入北大：遗憾不能上高三
2024-06-26 22:26:16
男生估分600只考了397 妈妈：高考虽重要，但不代表所有
2024-06-26 22:23:01
唐尚珺回应是否会直播带货：有人出100万想和他合作！
2024-06-25 19:29:23
名校抢人名场面：清华、北大太拼了！
2024-06-25 19:22:14
男生高考语文满分！网友：第一次听说
2024-06-25 19:19:15

疑难解答

图片精选

网友关注

关于本站 - 网上投稿 - 商务合作 - 隐私政策 - 网站地图
Copyright © 2008 - 2024 VEVB.COM. All Rights Reserved.武林网 版权所有