网站地图
【www.gdgbn.com--页面特效】
asp教程.net 文件上传进度条实现代码
index.htm就是文件上传页面，提交form给uploadhandler目录下的default.aspx，以实现文件上传。
progresshandler目录下三个文件为abort.ashx、genericguid.ashx,handler.ashx功能分别为：根据guid取消正在上传的文件，生成guid，根据guid获取上传信息。
第一步：建立index.htm页面，这个上传页面，需要注意的就是需要一个隐藏的iframe，并且名字为form提交的目标。
view code 1
2
3
4
5
6
7 css教程" rel="stylesheet" type="text/css" />
8 <script src="scripts/jquery-1.4.2.min.js" type="text/网页特效"></script>
9 <script src="scripts/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
10 <script src="scripts/ljq.lib.js" type="text/javascript"></script>
11 <script src="scripts/ajax/guidget.js" type="text/javascript"></script>
12 <script src="scripts/ajax/ajax-progress-upload.js" type="text/javascript"></script>
13
14
15
16 asp.net ajax 文件上传进度条示例
17
29
30
31
32 文件上传
33
34
35
36
37
38
39
40
41
42
43
44
45
46 取消确定
47
48
49
50
53
54
55
56
第二步，创建generateguid.ashx文件，作用就是生成唯一的guid.
view code
第三步，创建default.aspx文件，用于提交表单时上传文件。
view code 1 using system;
2 using system.collections.generic;
3 using system.linq;
4 using system.web;
5 using system.web.ui;
6 using system.web.ui.webcontrols;
7 /*========================================================================================
8 *
9 * developed by 李检全
10 *
11 * date 2011-03-10
12 *
13 * contact me
14 *
15 * address 辽宁省大连市开发区辽河西路18号大连民族学院二教631工作室
16 *
17 * email lijianquan07@gmail.com
18 *
19 * qq 55643287
20 *
21 * copyright (c) 李检全 all rights reserved
22 *
23 * =======================================================================================
24 */
25 public partial class uploadhandler_default : system.web.ui.page
26 {
27 protected void page_load(object sender, eventargs e)
28 {
29 string guid = request.params["guid"];
30 uploadutil utilhelp = new uploadutil(this, guid);
31 utilhelp.upload();
32 }
33 }
上传核心代码：
view code 1 using system;
2 using system.collections.generic;
3 using system.linq;
4 using system.web;
5 using system.io;
6 using system.configuration;
7 using system.web.ui;
8 using system.web.caching;
9 using system.threading;
10 /*========================================================================================
11 *
12 * developed by 李检全
13 *
14 * date 2011-03-10
15 *
16 * contact me
17 *
18 * address 辽宁省大连市开发区辽河西路18号大连民族学院二教631工作室
19 *
20 * email lijianquan07@gmail.com
21 *
22 * qq 55643287
23 *
24 * copyright (c) 李检全 all rights reserved
25 *
26 * =======================================================================================
27 */
28 public class uploadutil
29 {
30 private stream reader;
31 private filestream fstream;
32 private const int buffersize = 10000;
33 private string filepath =new page().server.mappath(configurationmanager.apps教程ettings["upload_folder"]);
34 private page page;
35 private string guid;
36 public uploadutil(page page, string guid)
37 {
38 this.page = page;
39 this.guid = guid;
40 }
41 public void upload()
42 {
43 if (this.page.request.files.count > 0)
44 {
45 this.doupload(this.page.request.files[0]);
46 }
47 else
48 {
49 return;
50 }
51 }
52 private void doupload(httppostedfile postedfile)
53 {
54 bool _abort = false;
55 string _filepath = this.filepath + datetime.now.tofiletime()+"//";
56 if (!directory.exists(_filepath))
57 {
58 directory.createdirectory(_filepath);
59 }
60 string _filename = postedfile.filename;
61 downloadingfileinfo info = new downloadingfileinfo(_filename,postedfile.contentlength,postedfile.contenttype);
62 object fileobj = httpcontext.current.cache[this.guid];
63 if (fileobj != null)
64 {
65 httpcontext.current.cache.remove(this.guid);
66 }
67 httpcontext.current.cache.add(this.guid, info, null, datetime.now.adddays(1), timespan.zero, cacheitempriority.abovenormal, null);
68 datetime begin=datetime.now.tolocaltime();
69 fstream = new filestream(_filepath+_filename,filemode.create);
70 reader = postedfile.inputstream;
71 byte []buffer=new byte[buffersize];
72 int len = reader.read(buffer,0,buffersize);
73
74 while (len > 0&&!_abort)
75 {
76 fstream.write(buffer,0,len);
77 datetime end = datetime.now.tolocaltime();
78 info.costtime = (long)(end - begin).totalmilliseconds;
79 info.filefinished += len;
80
81 //模拟延时用，实际应用的时候注销他
82 thread.sleep(10);
83
84 httpcontext.current.cache[this.guid] = info;
85 _abort=((downloadingfileinfo)httpcontext.current.cache[this.guid]).abort;
86 len = reader.read(buffer,0,buffersize);
87 }
88
89 reader.close();
90 fstream.close();
91 if (_abort)
92 {
93 if (file.exists(_filepath + _filename))
94 {
95 file.delete(_filepath + _filename);
96 }
97 }
98 }
99
100 }
第四步，创建handler.ashx文件，用于查看文件上传情况。
view code 1 <%@ webhandler language="c#" class="handler" %>
2
3 using system;
4 using system.web;
5 using system.xml.linq;
6 using system.web.caching;
7 /*========================================================================================
8 *
9 * developed by 李检全
10 *
11 * date 2011-03-10
12 *
13 * contact me
14 *
15 * address 辽宁省大连市开发区辽河西路18号大连民族学院二教631工作室
16 *
17 * email lijianquan07@gmail.com
18 *
19 * qq 55643287
20 *
21 * copyright (c) 李检全 all rights reserved
22 *
23 * =======================================================================================
24 */
25 public class handler : ihttphandler {
26
27 public void processrequest (httpcontext context) {
28 context.response.contenttype = "application/xml";
29 context.response.charset = "utf-8";
30 string guid = context.request.form["guid"];
31 downloadingfileinfo info = context.cache[guid] as downloadingfileinfo;
32 xdocument doc = new xdocument();
33 xelement root = new xelement("root");
34 if (info != null)
35 {
36 xelement filename = new xelement("filename", info.filename);
37 xelement filefinished = new xelement("filefinished", info.filefinished);
38 xelement filesize = new xelement("filesize", info.filesize);
39 xelement costtime = new xelement("costtime", info.costtime);
40 xelement filestate = new xelement("filestate", info.filestate);
41 xelement speed = new xelement("speed",info.speed);
42 xelement percent = new xelement("percent",info.percent);
43 xelement abort = new xelement("abort",false);
44 root.add(filename);
45 root.add(filefinished);
46 root.add(filesize);
47 root.add(costtime);
48 root.add(filestate);
49 root.add(speed);
50 root.add(percent);
51 if (info.abort)
52 {
53 abort.value = info.abort.tostring();
54 context.cache.remove(guid);
55 }
56 if (info.filestate == "finished")
57 {
58 context.cache.remove(guid);
59 }
60
61
62 }
63 else
64 {
65 xelement none = new xelement("none","no file");
66 root.add(none);
67 }
68 doc.add(root);
69 context.response.write(doc.tostring());
70 context.response.end();
71 }
72
73 public bool isreusable {
74 get {
75 return false;
76 }
77 }
78
79 }
第五步，创建abort.ashx文件，用于取消上传。
view code 1 <%@ webhandler language="c#" class="abort" %>
2
3 using system;
4 using system.web;
5 using system.xml.linq;
6 /*========================================================================================
7 *
8 * developed by 李检全
9 *
10 * date 2011-03-10
11 *
12 * contact me
13 *
14 * address 辽宁省大连市开发区辽河西路18号大连民族学院二教631工作室
15 *
16 * email lijianquan07@gmail.com
17 *
18 * qq 55643287
19 *
20 * copyright (c) 李检全 all rights reserved
21 *
22 * =======================================================================================
23 */
24
25 public class abort : ihttphandler {
26
27 public void processrequest (httpcontext context) {
28 context.response.contenttype = "application/xml";
29 context.response.charset = "utf-8";
30 string guid = context.request.form["guid"];
31 bool abort = string.isnullorempty(context.request.form["abort"]) ? false : true;
32 downloadingfileinfo info = context.cache[guid] as downloadingfileinfo;
33 if (info != null)
34 {
35 info.abort = abort;
36 context.cache[guid] = info;
37 }
38 xdocument doc = new xdocument();
39 xelement root = new xelement("root");
40 xelement flag = new xelement("flag",info==null?"false":"true");
41 root.add(flag);
42 doc.add(root);
43 context.response.write(doc.tostring());
44 context.response.end();
45 }
46
47 public bool isreusable {
48 get {
49 return false;
50 }
51 }
52
53 }
好了，下面就是编写javascript脚本了，我引用了jquery这个框架，另外还用了ui框架。
核心代码是ajax-progress-upload.js文件，另外还有一个获取guid的文件。
view code 1 /*========================================================================================
2 *
3 * developed by 李检全
4 *
5 * date 2011-03-10
6 *
7 * contact me
8 *
9 * address 辽宁省大连市开发区辽河西路18号大连民族学院二教631工作室
10 *
11 * email lijianquan07@gmail.com
12 *
13 * qq 55643287
14 *
15 * copyright (c) 李检全 all rights reserved
16 *
17 * =======================================================================================
18 */
19 $(document).ready(function () {
20 var _guid_url = "progresshandler/generateguid.ashx";
21 var _progress_url = "progresshandler/handler.ashx";
22 var _abort_url = "progresshandler/abort.ashx";
23 var _target = "#guid";
24 var _guid = "";
25 var _cancel = false;
26 var _timer;
27 ljq.setguid(_target, _guid_url);
28 $("#upload_panel").draggable({ handle: "#upload_title" });
29 $("#upload_choose span").hover(function () {
30 $(this).css({
31 "color": "#f6af3a",
32 "border": "1px solid #e78f08"
33 });
34 }, function () {
35 $(this).css({
36 "color": "#1c94cd",
37 "border": "1px solid #ddd"
38 });
39 });
40 $("#upload_cancel").click(function () {
41 $.ajax({
42 url: _abort_url,
43 data: { guid: _guid, abort: true },
44 datatype: "xml",
45 type: "post",
46 success: function () {
47
48 $("#upload_panel").fadeout("fast");
49 $("#back_panel").fadeout(1000);
50 window.clearinterval(_timer);
51 }
52 });
53
54
55 });
56 $("#upload_submit").click(function () {
57 $("#upload_panel").fadeout("fast");
58 $("#back_panel").fadeout("1000");
59 });
60 $("form").submit(function () {
61 _guid = $(_target).val();
62 if ($("input[name="upload_file"]").val() == "") {
63 alert("未指定上传文件！");
64 return false;
65 }
66 $("#upload_progress").css("width", "0%");
67 $("#finished_percent").html("准备上传...");
68 $("#upload_speed").html("");
69 $("#upload_filename").html("");
70 $("#upload_filesize").html("");
71 $("#upload_costtime").html("");
72 var _option = {
73 url: _progress_url,
74 data: { guid: _guid },
75 datatype: "xml",
76 type: "post",
77 beforesend: function () {
78 $("#back_panel").fadeto("fast", "0.5");
79 $("#upload_panel").fadein("1000");
80 },
81 success: function (response) {
82
83 if ($(response).find("root abort").text() == "true") {
84 $("#upload_panel").fadeout("fast");
85 $("#back_panel").fadeout(1000);
86 window.clearinterval(_timer);
87 }
88
89 else if ($(response).find("root none").text() == "no file") {
90
91 }
92 else {
93 var _percent = ($(response).find("root percent").text() * 100);
94 var _speed = $(response).find("root speed").text();
95 var _filesize = $(response).find("root filesize").text();
96 var _upload_costtime = $(response).find("root costtime").text();
97 if (parseint(_speed) < 1024) {
98 _speed = ljq.tofix(_speed) + "kb";
99 } else {
100 _speed = ljq.tofix(_speed / 1024) + "mb";
101 }
102
103 if (parseint(_filesize) / 1024 < 1024) {
104 _filesize = ljq.tofix(_filesize / 1024) + "kb";
105 } else if (parseint(_filesize) / 1024 / 1024 < 1024) {
106 _filesize = ljq.tofix(_filesize / 1024 / 1024) + "mb";
107 } else {
108 _filesize = ljq.tofix(_filesize / 1024 / 1024 / 1024) + "gb";
109 }
110
111 if (_upload_costtime < 1000) {
112 _upload_costtime = _upload_costtime + "毫秒";
113 } else if (_upload_costtime / 1000 < 60) {
114 _upload_costtime = parseint(_upload_costtime / 1000) + "秒" + _upload_costtime % 1000 + "毫秒";
115 } else {
116 _upload_costtime = parseint(_upload_costtime / 1000 / 60) + "分" + parseint((_upload_costtime % 60000) / 1000) + "秒" + _upload_costtime % 1000 + "毫秒";
117 }
118 $("#upload_progress").css("width", parseint(_percent) + "%");
119 $("#finished_percent").html("完成百分比：" + ljq.tofix(_percent) + "%");
120 $("#upload_speed").html("上传速度：" + _speed + "/sec");
121 $("#upload_filename").html("文件名称：" + $(response).find("root filename").text());
122 $("#upload_filesize").html("文件大小：" + _filesize);
123 $("#upload_costtime").html("上传耗时：" + _upload_costtime);
124 if (_percent >= 100) {
125
126 window.clearinterval(_timer);
127 $("#finished_percent").html("文件上传完成");
128 }
129 if (_cancel) {
130 window.clearinterval(_timer);
131 }
132 }
133
134 },
135 error: function () { }
136 };
137
138 _timer = window.setinterval(function () { $.ajax(_option); }, 1000);
139
140 });
141
142 });
view code 1 /*========================================================================================
2 *
3 * developed by 李检全
4 *
5 * date 2011-03-10
6 *
7 * contact me
8 *
9 * address 辽宁省大连市开发区辽河西路18号大连民族学院二教631工作室
10 *
11 * email lijianquan07@gmail.com
12 *
13 * qq 55643287
14 *
15 * copyright (c) 李检全 all rights reserved
16 *
17 * =======================================================================================
18 */
19 (function () {
20 if (!window["ljq"]) {
21 window["ljq"] = {};
22 }
23 function setguid(target, url) {
24 var _option = {
25 url: url,
26 datatype: "xml",
27 type: "post",
28 success: function (response) {
29 $(target).val($(response).find("root guid").text());
30 }
31 };
32 $.ajax(_option);
33 }
34 window["ljq"]["setguid"] = setguid;
35 function getprogress(guid) {
36 var _option = {};
37 }
38 })();
好了