大文件上传进度条显示

浏览-选择文件-点击 “上传 ”后，效果如下：

　　弹出透明UI遮罩层并显示上传这个过程我这里设置太透明了效果不是很立体

文件结构如图：

　说明：用到“高山来客”的大文件上传组件 http://www.cnblogs.com/bashan/archive/2008/05/23/1206095.html

　　以及Newtonsoft.Json.dll Json字符串反序列化为对象 http://james.newtonking.com/projects/json-net.aspx

　　jquery.blockUI.js 弹出透明遮罩层 http://malsup.com/jquery/block/

　　jquery.form.js　　表单验证Ajax提交　

　　HTML：

 1 <form　id="uploadForm"　runat="server"　enctype="multipart/form-data">　
 2 　<div　id="uploadfield"　style="600px;　height:500px">　
 3 　　<input　id="File1"　type="file"　runat="server"　/>　
 4 　　<asp:Button　ID="Button1"　runat="server"　Text="上传"　onclick="Button1_Click"　/>　
 5 　　<p>文件上传进度条</p>　
 6 　　<p>文件上传进度条</p>　
 7 　　<p>文件上传进度条</p>　
 8 　　<p>文件上传进度条</p>　
 9 　　<p>文件上传进度条</p>　
10 　　<p>文件上传进度条</p>　
11 　　　<p>文件上传进度条</p>　
12 　　</div>　　　　　　　　　
13 　<div　id="ui"　style="display:none"　>　　
14 　　<div　id="output"　>　</div>　　　
15 　　<div　id="progressbar"class="ui-progressbar　ui-widget　ui-widget-content　ui-corner-all"　style="296px;　height:20px;"></div>　
16 　　<input　id="btn_cancel"　type="button"　value="取消上传"　/>　
17 　</div>　
18 </form>

View Code

　js:

 1 var　inte;　
 2 $(function()　{　
 3 $('#uploadForm').submit(function()　{　
 4 　　return　false;　
 5 });　
 6 　
 7 $('#uploadForm').ajaxForm({　//这里调用jquery.form.js表单注册方法　
 8 　　beforeSubmit:　function(a,　f,　o)　{//提交前的处理　
 9 　　　　o.dataType　=　"json";　
10 　　　　$('#uploadfield').block({　message:　$('#ui'),　css:　{　　'300px',　border:　'#b9dcfe　1px　solid',padding:　'0.5em　0.2em'　}　
11 　　　　});　
12 　　　　inte　=　self.setInterval("getprogress()",　500);　
13 　　}　
14 });　
15 　
16 $('#btn_cancel').click(function()　{　
17 　　var　uploadid　=　$("#UploadID").val();　
18 　　$.ajax({　
19 　　　　type:　"POST",　
20 　　　　dataType:　"json",　
21 　　　　async:　false,　//ajax的请求时同步　只有一个线程　
22 　　　　url:　"upload_ajax.ashx",　
23 　　　　data:　"UploadID="　+　uploadid　+　"&cancel=true",　
24 　　　　success:　function(obj)　{　
25 　　　　　　$("#output").html(obj.msg);　
26 　　　　　　inte　=　self.clearInterval(inte);　
27 　　　　　　$('#uploadfield').unblock();　
28 　　　　　　　
29 　　　　　　　}　
30 　　});　
31 });　
32 });　
33 　
34 function　getprogress()　{　
35 var　uploadid　=　$("#UploadID").val()　
36 $.ajax({　
37 　　type:　"POST",　
38 　　dataType:　"json",　
39 　　async:　false,　
40 　　url:　"upload_ajax.ashx",　
41 　　data:　"UploadID="　+　uploadid,　
42 　　success:　function(obj)　{　
43 　　var　p　=　obj.msg.Readedlength　/　obj.msg.TotalLength　*　100;　
44 　　var　info　=　"<FONT　color=Green>　当前上传文件:</FONT>"　+　obj.msg.CurrentFile;　
45 　　info　+=　"<br><FONT　color=Green>"　+　obj.msg.FormatStatus　+　":</FONT>"　+　obj.msg.Status;　
46 　　info　+=　"<br><FONT　color=Green>文件大小:</FONT>"　+　obj.msg.TotalLength;　
47 　　info　+=　"<br><FONT　color=Green>速度:</FONT>"　+　obj.msg.FormatRatio;　
48 　　info　+=　"<br><FONT　color=Green>剩余时间:</FONT>"　+　obj.msg.LeftTime;　
49 　
50 　
51 　　$("#output").html(info);　
52 　　$("#progressbar").progressbar({　value:　0　});　//初始化　
53 　　$("#progressbar").progressbar("option",　"value",　p);　
54 　　$("#progressbar　div").html(p.toFixed(2)　+　"%");　
55 　　$("#progressbar　div").addClass("percentText");　
56 　　if　(obj.msg.Status　==　4)　{　
57 　　　　inte　=　self.clearInterval(inte);　
58 　　　　$('#uploadfield').unblock();　
59 　　}　
60 　　　　
61 　　}　
62 });　
63 }

View Code

交互过程代码：

 1 <%@　WebHandler　Language="C#"　Class="progressbar"　%>　
 2 　
 3 using　System;　
 4 using　System.Web;　
 5 　
 6 using　BigFileUpload;//大文件引用命名空间　
 7 using　Newtonsoft.Json;//对象到JSON的相互转换　
 8 using　System.Text.RegularExpressions;//正则　
 9 　
10 public　class　progressbar　:　IHttpHandler　{　
11 　　　
12 private　string　template　=　"{{statue:'{0}',msg:{1}}}";　　
13 public　void　ProcessRequest(HttpContext　context)　　
14 {　　
15 　　context.Response.ContentType　=　"text/plain";　　
16 　　try　　
17 　　{　　
18 　　string　guid　=　context.Request["UploadID"];　　
19 　　string　cancel　=context.Request["cancel"];　
20 　　UploadContext　c　=　UploadContextFactory.GetUploadContext(guid);　　
21 　　if　(!string.IsNullOrEmpty(cancel))　
22 　　{　　　　　　
23 　　　　c.Abort=true;　
24 　　　　　　
25 　　　　throw　new　Exception("用户取消");　　
26 　　}　　
27 　　string　json　=　Newtonsoft.Json.JsonConvert.SerializeObject(c);　　
28 　　　　　　
29 　　WriteResultJson(1,　json,　context,template);　
30 　　　　　　
31 　　}catch　(Exception　err)　　
32 　　{　　
33 　　　　WriteResultJson(0,　err.Message,　context);　　
34 　　}　　
35 }　
36 　
37 　　
38 　
39 public　static　void　WriteResultJson(int　resultno,　string　description,　HttpContext　context)　
40 {　
41 　　WriteResultJson(resultno,　description,　context,　"{{statue:'{0}',msg:'{1}'}}");　
42 }　
43 　
44 public　static　void　WriteResultJson(int　resultno,　string　description,　HttpContext　context,　string　template)　
45 {　
46 　　description　=　ClearBR(ReplaceString(description,　"'",　"|",　false));　
47 　　context.Response.Write(string.Format(template,　resultno,　description));　
48 }　
49 　
50 public　static　string　ClearBR(string　str)　
51 {　
52 　　Regex　r　=　null;　
53 　　Match　m　=　null;　
54 　　r　=　new　Regex(@"(r|n)",　RegexOptions.IgnoreCase);　
55 　　for　(m　=　r.Match(str);　m.Success;　m　=　m.NextMatch())　
56 　　{　
57 　　　　str　=　str.Replace(m.Groups[0].ToString(),　@"n");　
58 　　}　
59 　　return　str;　
60 }　
61 　
62 public　static　string　ReplaceString(string　SourceString,　string　SearchString,　string　ReplaceString,　bool　IsCaseInsensetive)　
63 {　
64 　　return　Regex.Replace(SourceString,　Regex.Escape(SearchString),　ReplaceString,　IsCaseInsensetive　?　RegexOptions.IgnoreCase　:　RegexOptions.None);　
65 }　
66 　　
67 public　bool　IsReusable　　
68 {　　
69 　　get　　
70 　　{　
71 　　　　return　false;　　
72 　　}　　
73 }　
74 }

View Code