`
ayue222
  • 浏览: 49503 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS 模拟上传进度条

阅读更多
<!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>
分享到:
评论
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实现这个功能。 首先,我们需要理解上传进度条的基本原理。在HTML5中,`&lt;input type="file"&gt;`元素提供了文件选择的功能,而FileReader API则...

    简单用JS模拟上传进度条

    总结来说,模拟上传进度条的关键在于利用`XMLHttpRequest`或`Fetch API`的`upload`事件监听上传进度,并更新前端的UI。同时,为了确保跨域请求的成功,服务器端需要配置合适的CORS策略。这只是一个基础的实现,实际...

    JS模拟进度条.zip

    在这个"JS模拟进度条.zip"压缩包中,可能包含了一个名为"jiaoben18598"的文件,这可能是实现进度条功能的源代码或示例。 在JavaScript中,模拟进度条通常涉及以下几个关键知识点: 1. **HTML结构**:首先,我们...

    用js控制的上传进度条的显示

    - 包含文件输入框`&lt;input type="file" id="f"&gt;`和一个按钮`ϴ" onclick="count()"&gt;`,按钮点击后触发`count()`函数开始模拟上传过程。 #### 四、JavaScript逻辑分析 - **全局变量定义**: - `bar`: 当前进度(以...

    伪进度条(js特效)

    "伪进度条"是利用JavaScript实现的一种视觉效果,它并不直接与后台进程关联,而是通过模拟进度来提供用户体验上的反馈。这种特效可以增加用户对网站交互的感知,提高其满意度。下面我们将详细讨论如何使用JavaScript...

    简单的进度条模拟.zip

    【标题】:“简单的进度条模拟.zip”所包含的是一个关于如何使用HTML和JavaScript在网页上创建简单进度条的示例项目。这个项目的核心是利用这两种技术来动态展示数据处理或加载的状态,为用户提供视觉反馈。 【描述...

    javascript实现上传文件进度条

    本篇文章将深入探讨如何使用JavaScript实现上传文件的进度条功能。 首先,我们需要理解HTML5引入的File API,它是实现文件上传进度的关键。File API允许我们访问和操作用户选择的文件,包括读取文件内容、获取文件...

    用 Javascript 模拟 Vista 风格进度条

    通过以上步骤,我们可以成功地使用JavaScript模拟出Vista风格的进度条。这种技术不仅可以用于上传下载的进度指示,还可以用于加载页面内容、游戏进度等场景,提升用户的交互体验。同时,这也展示了JavaScript在前端...

    js进度条大全,总有一款适合您

    "js 进度条"是使用JavaScript编程语言实现的这类动态效果,通过改变HTML元素的样式或属性来模拟进度的变化。 在压缩包中,我们可以看到以下几个文件: 1. `1.gif`、`3.jpg`、`3Bg.jpg`、`2.jpg`:这些通常是进度条...

    php与js实现进度条的操作

    本文将详细解析如何利用PHP和JavaScript(JS)结合实现文件上传过程中的进度条操作,这不仅提升了用户交互体验,还使得整个上传过程更加透明可控。 ### PHP与JS实现进度条的原理 在Web应用中,文件上传通常是由...

    asp.net上传图片带进度条

    在处理过程中,我们可以通过JavaScript或者AJAX技术来更新前端的进度条,展示文件上传的进度。 1. **前端界面设计**: - 使用HTML5的`&lt;input type="file"&gt;`元素让用户选择图片。 - 创建一个进度条元素,如`...

    js完美进度条,做效果的不二选择

    "js完美进度条"正是这样一个解决方案,它利用JavaScript语言为网页增添视觉吸引力,为用户展示任务执行或数据加载的过程。本文将深入探讨如何利用JavaScript实现一个完美的进度条效果,并分享相关知识点。 首先,...

    js一个非常实用好看得进度条

    总的来说,"js一个非常实用好看得进度条"项目提供了一个方便的工具,它结合了JavaScript的动态性与CSS的视觉表现力,创建出了一款适应多种现代浏览器的进度条组件。开发人员可以根据自己的需求对其进行自定义,以...

    模拟进度条实例

    在IT行业中,尤其是在网页开发领域,进度条是一个常见的交互元素,用于给用户展示某个操作的进行状态,如数据加载、文件上传或下载等。本文将深入探讨如何利用jQuery实现一个模拟进度条的实例,帮助开发者提升用户...

    JAVA实现模拟导入数据/上传文件进度条

    在Java Web开发中,实现一个模拟数据导入或文件上传进度条功能可以极大提升用户体验,让用户在等待过程中心中有数。这个功能通常涉及到前端与后端的交互,涉及到的技术包括Servlet、JSP、jQuery和Ajax。下面我们将...

    layui-progress+element+jquery+js设计一个动态进度条

    例如,当用户发起一个大文件上传请求时,后台处理文件的同时,前端可以通过JavaScript实时更新进度条,让用户知道任务的进度,提高用户的等待感知。 为了实现这样一个动态进度条,开发者需要做以下步骤: 1. 引入...

    6种经典的asp上传文件源码+带进度条

    由于HTTP协议本身的限制,文件上传不支持进度显示,所以通常需要借助JavaScript或者Flash等技术在客户端模拟进度条。 2. ASP上传组件: ASP文件上传通常需要借助组件,例如:`CFUpload`、`SmartUpload`等。这些...

    用SSH+ajax实现的上传进度条,仿qq邮箱的大文件上传窗体

    这种方案不仅能够实时展示文件上传进度,还能够模拟出类似QQ邮箱等知名平台的大文件上传窗体功能,极大地提升了用户体验。 #### 二、关键技术点分析 **1. SSH框架简介** - **Struts**:用于构建MVC架构的Web应用...

    Ajax和C#实现上传进度条

    - 使用这些信息更新进度条的宽度或填充,模拟上传进度。 - 当`onload`或`onerror`事件触发时,停止进度条动画,表示上传完成或出现错误。 5. **安全和性能考虑**: - 为了避免跨站脚本攻击(XSS)和跨站请求伪造...

    PHP5.2上传进度条

    - 为了实现进度条,我们需要借助前端JavaScript和AJAX来模拟进度。 5. **前端技术** - 使用AJAX异步上传,配合XMLHttpRequest对象,可以在后台处理文件上传,同时更新进度条信息。 - JavaScript或jQuery监听表单...

Global site tag (gtag.js) - Google Analytics