js模拟文件上传进度条
1 <!doctype html public "-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
5 <title>JS模拟上传进度条</title>
6 </head>
7 <body>
8 </body>
9 <script type="text/javascript">
10 var bind = function(obj,func){
11 return function(){
12 func.apply(obj,arguments);
13 };
14 };
15 var uploadBAR=function(container){
16 container=(!document.getElementById(container))?this.createContainer(container):document.getElementById(container);
17 this.ostart = container.getElementsByTagName('input')[0];
18 this.oinit = container.getElementsByTagName('input')[1];
19 this.container=container;
20 this.nBar=container.id+'_uploadBAR';
21 this.total=95;
22 };
23 uploadBAR.prototype = {
24 addEventHandler:function(obj, type, func) {
25 if(!obj){return;}
26 if(obj.addEventListener){obj.addEventListener(type, func, false);}
27 else if(obj.attachEvent){obj.attachEvent("on" + type, func);}
28 else{obj["on" + type] = func;}
29 },
30 on:function(e){
31 this.addEventHandler(this.ostart,'click',bind(this,this.start));
32 this.addEventHandler(this.oinit,'click',bind(this,this.init));
33 },
34 init:function(e){
35 this.oinit.blur();
36 if(this.up!=undefined){
37 clearInterval(this.up);
38 }
39 this.x=this.y=0;
40 this.ostart.value='start';
41 this.ostart.disabled=false;
42 if(document.getElementById(this.nBar)){
43 var pBar=document.getElementById(this.nBar).parentNode;
44 pBar.removeChild(document.getElementById(this.nBar));
45 if(pBar.getElementsByTagName('div').length==0){document.body.removeChild(pBar);}
46 }
47 },
48 setTime:function(){
49 this.x++;
50 },
51 createContainer:function(oName){
52 var buildStart=document.createElement('input');
53 buildStart.value='start';
54 buildStart.type='button';
55 var buildInit=document.createElement('input');
56 buildInit.value='init';
57 buildInit.type='button';
58 var oDIV=document.createElement('div');
59 oDIV.id=oName;
60 oDIV.appendChild(buildStart);
61 oDIV.appendChild(buildInit);
62 document.body.appendChild(oDIV);
63 buildStart=buildInit=null;
64 return oDIV;
65 },
66 createBAR:function(){
67 if(document.getElementById(this.nBar)!=undefined){return;}
68 if(document.getElementById('bar_container')==undefined){
69 var Barcontainer=document.createElement('div');
70 Barcontainer.id="bar_container";
71 Barcontainer.style.width="200px";
72 Barcontainer.style.border="1px solid #999";
73 Barcontainer.style.backgroundColor="#ccc";
74 Barcontainer.style.overflowX="hidden";
75 Barcontainer.style.position=(document.all)?"absolute":"fixed";
76 var bHeight=(document.documentElement.clientHeight-18)/2+"px",
77 bWeight=(document.documentElement.clientWidth-parseInt(Barcontainer.style.width))/2+"px";
78 Barcontainer.style.top=bHeight;
79 Barcontainer.style.left=bWeight;
80 document.body.appendChild(Barcontainer);
81 }
82 var newBar=document.createElement('div');
83 newBar.innerHTML=' ';
84 newBar.id=this.nBar;
85 newBar.style.border="5px solid #ccc";
86 document.getElementById('bar_container').appendChild(newBar);
87 },
88 setBAR:function(xx){
89 var BAR=document.getElementById(this.nBar);
90 BAR.style.backgroundColor=(xx==100)?"#00ff00":"#333";
91 BAR.style.width = xx+"%";
92 BAR.style.textAlign="center";
93 BAR.style.color = "#FFF";
94 BAR.style.fontWeight = "bold";
95 if(xx==this.total){
96 BAR.innerHTML = "complete";
97 this.ostart.value='start';
98 this.ostart.disabled=true;
99 setTimeout(bind(this,this.init),1000);
100 }
101 },
102 go:function(xx){
103 var ostart=this.ostart,x=this.x,total=this.total,_x=bind(this,this.setTime),_bar=bind(this,this.setBAR);
104 this.up=setInterval(function(){
105 if(x<total){
106 x++;
107 _x();
108 }
109 else{
110 var _up=bind(this,this.up);
111 clearInterval(_up);
112 this.value=='start';
113 this.disabled=true;
114 }
115 _bar(x);
116 },10);
117 },
118 run:function(){
119 this.ostart.blur();
120 if(this.x==undefined||this.x==this.total){this.x=0;this.y=0;}
121 this.ostart.value=(this.ostart.value=='start')?"pause":"start";
122 this.y++;
123 clearInterval(this.up);
124 if(this.y>1){this.y=0;return;}
125 this.go(this.x);
126 },
127 start:function(){
128 var createBAR=bind(this,this.createBAR);
129 var run=bind(this,this.run);
130 createBAR();
131 run();
132 }
133 };
134 var bar1=new uploadBAR('upload');
135 bar1.on();
136 var bar2=new uploadBAR('upload1');
137 bar2.on();
138 </script>
139 </html>
2 <html>
3 <head>
4 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
5 <title>JS模拟上传进度条</title>
6 </head>
7 <body>
8 </body>
9 <script type="text/javascript">
10 var bind = function(obj,func){
11 return function(){
12 func.apply(obj,arguments);
13 };
14 };
15 var uploadBAR=function(container){
16 container=(!document.getElementById(container))?this.createContainer(container):document.getElementById(container);
17 this.ostart = container.getElementsByTagName('input')[0];
18 this.oinit = container.getElementsByTagName('input')[1];
19 this.container=container;
20 this.nBar=container.id+'_uploadBAR';
21 this.total=95;
22 };
23 uploadBAR.prototype = {
24 addEventHandler:function(obj, type, func) {
25 if(!obj){return;}
26 if(obj.addEventListener){obj.addEventListener(type, func, false);}
27 else if(obj.attachEvent){obj.attachEvent("on" + type, func);}
28 else{obj["on" + type] = func;}
29 },
30 on:function(e){
31 this.addEventHandler(this.ostart,'click',bind(this,this.start));
32 this.addEventHandler(this.oinit,'click',bind(this,this.init));
33 },
34 init:function(e){
35 this.oinit.blur();
36 if(this.up!=undefined){
37 clearInterval(this.up);
38 }
39 this.x=this.y=0;
40 this.ostart.value='start';
41 this.ostart.disabled=false;
42 if(document.getElementById(this.nBar)){
43 var pBar=document.getElementById(this.nBar).parentNode;
44 pBar.removeChild(document.getElementById(this.nBar));
45 if(pBar.getElementsByTagName('div').length==0){document.body.removeChild(pBar);}
46 }
47 },
48 setTime:function(){
49 this.x++;
50 },
51 createContainer:function(oName){
52 var buildStart=document.createElement('input');
53 buildStart.value='start';
54 buildStart.type='button';
55 var buildInit=document.createElement('input');
56 buildInit.value='init';
57 buildInit.type='button';
58 var oDIV=document.createElement('div');
59 oDIV.id=oName;
60 oDIV.appendChild(buildStart);
61 oDIV.appendChild(buildInit);
62 document.body.appendChild(oDIV);
63 buildStart=buildInit=null;
64 return oDIV;
65 },
66 createBAR:function(){
67 if(document.getElementById(this.nBar)!=undefined){return;}
68 if(document.getElementById('bar_container')==undefined){
69 var Barcontainer=document.createElement('div');
70 Barcontainer.id="bar_container";
71 Barcontainer.style.width="200px";
72 Barcontainer.style.border="1px solid #999";
73 Barcontainer.style.backgroundColor="#ccc";
74 Barcontainer.style.overflowX="hidden";
75 Barcontainer.style.position=(document.all)?"absolute":"fixed";
76 var bHeight=(document.documentElement.clientHeight-18)/2+"px",
77 bWeight=(document.documentElement.clientWidth-parseInt(Barcontainer.style.width))/2+"px";
78 Barcontainer.style.top=bHeight;
79 Barcontainer.style.left=bWeight;
80 document.body.appendChild(Barcontainer);
81 }
82 var newBar=document.createElement('div');
83 newBar.innerHTML=' ';
84 newBar.id=this.nBar;
85 newBar.style.border="5px solid #ccc";
86 document.getElementById('bar_container').appendChild(newBar);
87 },
88 setBAR:function(xx){
89 var BAR=document.getElementById(this.nBar);
90 BAR.style.backgroundColor=(xx==100)?"#00ff00":"#333";
91 BAR.style.width = xx+"%";
92 BAR.style.textAlign="center";
93 BAR.style.color = "#FFF";
94 BAR.style.fontWeight = "bold";
95 if(xx==this.total){
96 BAR.innerHTML = "complete";
97 this.ostart.value='start';
98 this.ostart.disabled=true;
99 setTimeout(bind(this,this.init),1000);
100 }
101 },
102 go:function(xx){
103 var ostart=this.ostart,x=this.x,total=this.total,_x=bind(this,this.setTime),_bar=bind(this,this.setBAR);
104 this.up=setInterval(function(){
105 if(x<total){
106 x++;
107 _x();
108 }
109 else{
110 var _up=bind(this,this.up);
111 clearInterval(_up);
112 this.value=='start';
113 this.disabled=true;
114 }
115 _bar(x);
116 },10);
117 },
118 run:function(){
119 this.ostart.blur();
120 if(this.x==undefined||this.x==this.total){this.x=0;this.y=0;}
121 this.ostart.value=(this.ostart.value=='start')?"pause":"start";
122 this.y++;
123 clearInterval(this.up);
124 if(this.y>1){this.y=0;return;}
125 this.go(this.x);
126 },
127 start:function(){
128 var createBAR=bind(this,this.createBAR);
129 var run=bind(this,this.run);
130 createBAR();
131 run();
132 }
133 };
134 var bar1=new uploadBAR('upload');
135 bar1.on();
136 var bar2=new uploadBAR('upload1');
137 bar2.on();
138 </script>
139 </html>
