js模拟文件上传进度条

zoukankan html css js c++ java

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>

查看全文

相关阅读:
iframe设置背景透明
 苹果新版QuickTime X启用新图标
 css命名规则
 视觉设计前瞻实用性研究（PNVD）第二期
 Tab(选项卡)的产品设计原则及应用 [1]
WiFi热点认证
 自画表格,微软报表,水晶报表初用初分析.
Winform 打印类重温
 Winform 打印DataGrid View
Winform 常用的.记住免得以后到处找.

原文地址：https://www.cnblogs.com/yeer/p/2279574.html