JS 模拟上传进度条

ayue222

浏览: 49652 次
性别:
来自: 北京

最近访客更多访客>>

zuzutang2

zcm1205

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

Ajax UP Go prototype HTML

<!doctype html public "-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>JS模擬上傳進度條</title>
</head>
<body>
</body>
<script type="text/javascript">
var bind = function(obj,func){
	return function(){
		func.apply(obj,arguments);
	};
};
var uploadBAR=function(container){
	container=(!document.getElementById(container))?this.createContainer(container):document.getElementById(container);
	this.ostart = container.getElementsByTagName('input')[0];
	this.oinit = container.getElementsByTagName('input')[1];
	this.container=container;
	this.nBar=container.id+'_uploadBAR';
	this.total=95;
};
uploadBAR.prototype = {
	addEventHandler:function(obj, type, func) {
		if(!obj){return;}
		if(obj.addEventListener){obj.addEventListener(type, func, false);}
		else if(obj.attachEvent){obj.attachEvent("on" + type, func);}
		else{obj["on" + type] = func;}
	},
	on:function(e){
		this.addEventHandler(this.ostart,'click',bind(this,this.start));
		this.addEventHandler(this.oinit,'click',bind(this,this.init));
	},
	init:function(e){
		this.oinit.blur();
		if(this.up!=undefined){
			clearInterval(this.up);
		}
		this.x=this.y=0;
		this.ostart.value='start';
		this.ostart.disabled=false;
		if(document.getElementById(this.nBar)){
			var pBar=document.getElementById(this.nBar).parentNode;
			pBar.removeChild(document.getElementById(this.nBar));
			if(pBar.getElementsByTagName('div').length==0){document.body.removeChild(pBar);}
		}
	},
	setTime:function(){
			this.x++;
	},
	createContainer:function(oName){
		var buildStart=document.createElement('input');
			buildStart.value='start';
			buildStart.type='button';
		var buildInit=document.createElement('input');
			buildInit.value='init';
			buildInit.type='button';
		var oDIV=document.createElement('div');
			oDIV.id=oName;
			oDIV.appendChild(buildStart);
			oDIV.appendChild(buildInit);
			document.body.appendChild(oDIV);
			buildStart=buildInit=null;
			return oDIV;
	},
	createBAR:function(){
		if(document.getElementById(this.nBar)!=undefined){return;}
		if(document.getElementById('bar_container')==undefined){
			var Barcontainer=document.createElement('div');
			Barcontainer.id="bar_container";
			Barcontainer.style.width="200px";
			Barcontainer.style.border="1px solid #999";
			Barcontainer.style.backgroundColor="#ccc";
			Barcontainer.style.overflowX="hidden";
			Barcontainer.style.position=(document.all)?"absolute":"fixed";
			var bHeight=(document.documentElement.clientHeight-18)/2+"px",
			bWeight=(document.documentElement.clientWidth-parseInt(Barcontainer.style.width))/2+"px";
			Barcontainer.style.top=bHeight;
			Barcontainer.style.left=bWeight;
			document.body.appendChild(Barcontainer);
		}
		var newBar=document.createElement('div');
			newBar.innerHTML='&nbsp;';
			newBar.id=this.nBar;
			newBar.style.border="5px solid #ccc";
			document.getElementById('bar_container').appendChild(newBar);
	},
	setBAR:function(xx){
		var BAR=document.getElementById(this.nBar);
			BAR.style.backgroundColor=(xx==100)?"#00ff00":"#333";
			BAR.style.width = xx+"%";
			BAR.style.textAlign="center";
			BAR.style.color = "#FFF";
			BAR.style.fontWeight = "bold";
			if(xx==this.total){
				BAR.innerHTML = "complete";
				this.ostart.value='start';
				this.ostart.disabled=true;
				setTimeout(bind(this,this.init),1000);
			}
	},
	go:function(xx){
		var ostart=this.ostart,x=this.x,total=this.total,_x=bind(this,this.setTime),_bar=bind(this,this.setBAR);
		this.up=setInterval(function(){
				if(x<total){
					x++;
					_x();
				}
				else{
					var _up=bind(this,this.up);
					clearInterval(_up);
					this.value=='start';
					this.disabled=true;
				}
				_bar(x);
		},10);
	},
	run:function(){
		this.ostart.blur();
		if(this.x==undefined||this.x==this.total){this.x=0;this.y=0;}
	    this.ostart.value=(this.ostart.value=='start')?"pause":"start";
	    this.y++;
	    clearInterval(this.up);
	    if(this.y>1){this.y=0;return;}
	    this.go(this.x);
	},
    start:function(){
		var createBAR=bind(this,this.createBAR);
		var run=bind(this,this.run);
		createBAR();
		run();
	}
};
var bar1=new uploadBAR('upload');
	bar1.on();
var bar2=new uploadBAR('upload1');
	bar2.on();
</script>
</html>

分享到：

优化JavaScript脚本的性能 | 仿开心网好友选择模块

2009-11-12 18:06
浏览 1110
评论(6)
论坛回复 / 浏览 (2 / 7649)
查看更多

6 楼 ziyu_1 2009-11-19

以前写过一个ajax轮询到后台查询进度然后返回显示

5 楼 pengsuyun 2009-11-18

不错，学习学习

4 楼 ayue222 2009-11-18

tobeno1 写道

逻辑看懂了，可是没运行出来

看看你的文件本身編碼是否為utf-8無bom，如果是gb2312就不行了

3 楼 wyh6635 2009-11-18

楼猪怎么不给出个效果图。。。。。。

2 楼 tobeno1 2009-11-18

逻辑看懂了，可是没运行出来

1 楼 tobeno1 2009-11-18

8错，8错

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JS 模拟上传进度条

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JS 模拟上传进度条

评论

发表评论

相关推荐

使用javascript动态创建SVG对象的问题

YUI3 事件

直接运行html的代码

JS正则表达式详解

如何在事件代理中正确使用 focus 和 blur 事件

如何判断脚本加载完成

JavaScript 获取事件对象的一个注意点

判断 iframe 是否加载完成的完美方法

JS将数字转换成三位逗号分隔的样式

YUI 3.0应用初探

JS iframe跨域自适应内容高度

话说browser的脚本并行下载

初涉YUI3

基於YUI2.8的 JS版多文件上传

自定义滚动条

javascript 整合的获取ID，className，tagName的方法

javascript 中绑定事件监听的函数【支持数组对象绑定】

判断指定对象是否存在于另一个对象的原型链中

基于yui3如何写模块（一）

Js 数组排序【支持对象】

最近访客更多访客>>