文档章节

ajax php 进度条

wankaiming
 wankaiming
发布于 2010/11/05 10:54
字数 454
阅读 757
收藏 2
点赞 0
评论 0

1.客户端

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Progress Bar</title>
<script type="text/javascript">
var xmlHttp;
var key;
var bar_color = 'red';
var span_id = "block";
var clear = "&nbsp;&nbsp;&nbsp;"
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function go() {
createXMLHttpRequest();
checkDiv();
var url = "jdt.php?task=create";
var button = document.getElementById("go");
button.disabled = true;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = goCallback;
xmlHttp.send(null);
}
function goCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var ff=xmlHttp.responseText;
eval(ff);
var counter=arr[0];
setTimeout("pollServer("+counter+")", 2000);
}
}
}
function pollServer(counter) {
createXMLHttpRequest();
var url = "jdt.php?task=poll&counter=" + counter;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = pollCallback;
xmlHttp.send(null);
}
function pollCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var ff=xmlHttp.responseText;
eval(ff);
var percent_complete=arr[1];
var index = processResult(percent_complete);
for (var i = 1; i <= index; i++) {
var elem = document.getElementById("block" + i);
elem.innerHTML = clear;
elem.style.backgroundColor = bar_color;
var next_cell = i + 1;
if (next_cell > index && next_cell <= 9) {
document.getElementById("block" + next_cell).innerHTML = percent_complete + "%";
}
}
if (index < 9) {
var ff=xmlHttp.responseText;
eval(ff);
var counter=arr[0];
setTimeout("pollServer("+counter+")", 2000);
} else {
document.getElementById("complete").innerHTML = "Complete!";
document.getElementById("go").disabled = false;
}
}
}
}
function processResult(percent_complete) {
var ind;
if (percent_complete.length == 1) {
ind = 1;
} else if (percent_complete.length == 2) {
ind = percent_complete.substring(0, 1);
} else {
ind = 9;
}
return ind;
}
function checkDiv() {
var progress_bar = document.getElementById("progressBar");
if (progress_bar.style.visibility == "visible") {
clearBar();
document.getElementById("complete").innerHTML = "";
} else {
progress_bar.style.visibility = "visible"
}
}
function clearBar() {
for (var i = 1; i < 10; i++) {
var elem = document.getElementById("block" + i);
elem.innerHTML = clear;
elem.style.backgroundColor = "white";
}
}
</script>
</head>
<body>
<h1>Ajax Progress Bar Example</h1>
Launch long-running process:
<input type="button" value="运行" id="go" onClick="go();"/>
<p>
<table align="center">
<tbody>
<tr><td>
<div id="progressBar"
style="padding:2px;border:solid black 2px;visibility:hidden">
<span id="block1">&nbsp;&nbsp;&nbsp;</span>
<span id="block2">&nbsp;&nbsp;&nbsp;</span>
<span id="block3">&nbsp;&nbsp;&nbsp;</span>
<span id="block4">&nbsp;&nbsp;&nbsp;</span>
<span id="block5">&nbsp;&nbsp;&nbsp;</span>
<span id="block6">&nbsp;&nbsp;&nbsp;</span>
<span id="block7">&nbsp;&nbsp;&nbsp;</span>
<span id="block8">&nbsp;&nbsp;&nbsp;</span>
<span id="block9">&nbsp;&nbsp;&nbsp;</span>
</div>
</td></tr>
<tr><td align="center" id="complete"></td></tr>
</tbody>
</table>
</body>
</html>
2.服务器端

<?php
     $task=$_GET['task'];
     $percent=0;
     if($task=="create"){
          $res=1;
          $counter=1;
     }else{
          $counter=$_GET['counter'];
          switch($counter){
               case 1: $percent = "10"; break;
               case 2: $percent = "23"; break;
               case 3: $percent = "35"; break;
               case 4: $percent = "51"; break;
               case 5: $percent = "64"; break;
               case 6: $percent = "73"; break;
               case 7: $percent = "89"; break;
               case 8: $percent = "100"; break;
          }
          $counter++;
     }
     $nn="var arr=['".$counter."','".$percent."']";
     echo $nn;
?>

 

© 著作权归作者所有

共有 人打赏支持
wankaiming

wankaiming

粉丝 71
博文 226
码字总数 64083
作品 0
广州
高级程序员
一些文件上传组件(Flash,JQuery,asp,php,js,AJAX)

FancyUpload FancyUpload是一个采用Flash与Ajax(MooTools)技术实现包含上传进度条的多文件上传组件,类似于SWFUpload。 FancyUpload Mootools jqUploader 结合Javascript与Flash开发,拥有...

老朱教授
2017/10/01
0
0
20+ 个很棒的 jQuery 文件上传插件或教程

文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验。本文介绍20个jQuery的文件上传插件,其中有一些是教程。 1. Plupload Plupload 是一个Web浏览...

红薯
2011/08/03
50.1K
9
Web设计与开发终极资源大全(上)

Web 技术突飞猛进,Web 设计与开发者们可以选择的工具越来越多,Web 开发者的技巧不再只限于 HTML 和 服务器端编程,还需要精通各种第三方资源,这些第三方资源有时候比你的项目更复杂,更专...

红薯
2010/03/18
1K
3
ajax+php实现进度显示是怎么实现的

如题,比如我后台要循环一百次,在前台需要一个进度条,实时的显示循环的进度,这个用php是怎么实现的,请教各位大神,谢谢! 实时的进度显示,是在当前脚本执行中,比如上面说的循环100次,...

王昊然
2012/10/18
1K
5
7款基于JavaScript和AJAX的文件上传插件

本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助。 1. jQuery File U...

EDIAGD
2013/09/23
0
0
PHP+jQuery+Ajax多图片上传

演示下载地址:http://www.erdangjiade.com/js/3.html 效果图: HTML首先我们在页面上放置个上传按钮,使用POST提交到ajax.php。#ulpics 用来显示上传完毕后的图片。关于按钮、进度条、图片垂...

2当家的
2017/03/14
350
1
php 大文件上传 进度条实现

不想基于扩展实现进度条 。 不想采用FLASH上传插件。 只用AJAX方式可否实现 能否使用 SESSION暂时存放 文件上传信息 客户端定时获取 这个信息来更新上传进度。给点想法和建议。...

GentleTroy
2012/03/01
4.2K
9
Ajax在线文件管理--SFBrowser

SFBrowser是一个开源的应用程序基于PHP与jQuery开发,拥有一个漂亮的Ajax界面来在线管理文件。 除了能够展示文件和文件夹功能外,还可以上传、删除、重命名和预览文件。上传可以通过Ajax或F...

匿名
2008/09/19
2.6K
1
利用FormData进行ajax上传文件

个人实现方式: html代码 js代码: 后台python代码 很简洁的代码,便可以达到Ajax方式上传文件,上面的代码中使用<input type="file" />这种传统的选择文件的方法产生文件对象,HTML5还支持使...

单蛙
2016/06/17
3.1K
0
请问大牛们,我最近在帮学校一个俱乐部做网站,php上传图片时遇到了恼火问题。

问题如下:先上代码 if (!is_dir("../data/showcase"))mkdir("../data/showcase");else{moveuploadedfile($FILES["postfile"]['tmp_name'],"../data/showcase/".$FILES["postfile"]['name'])......

yusaint
2010/11/10
315
4

没有更多内容

加载失败,请刷新页面

加载更多

下一页

shell中的函数、shell中的数组、告警系统需求分析

shell中的函数 格式: 格式: function f_name() { command } 函数必须要放在最前面 示例1(用来打印参数) 示例2(用于定义加法) 示例3(用于显示IP) shell中的数组 shell中的数组1 定义数...

Zhouliang6
今天
2
0
用 Scikit-Learn 和 Pandas 学习线性回归

      对于想深入了解线性回归的童鞋,这里给出一个完整的例子,详细学完这个例子,对用scikit-learn来运行线性回归,评估模型不会有什么问题了。 1. 获取数据,定义问题     没有...

wangxuwei
今天
1
0
MAC安装MAVEN

一:下载maven压缩包(Zip或tar可选),解压压缩包 二:打开终端输入:vim ~/.bash_profile(如果找不到该文件新建一个:touch ./bash_profile) 三:输入i 四:输入maven环境变量配置 MAVEN_HO...

WALK_MAN
今天
0
0
33.iptables备份与恢复 firewalld的9个zone以及操作 service的操作

10.19 iptables规则备份和恢复 10.20 firewalld的9个zone 10.21 firewalld关于zone的操作 10.22 firewalld关于service的操作 10.19 iptables规则备份和恢复: ~1. 保存和备份iptables规则 ~2...

王鑫linux
今天
2
0
大数据教程(2.11):keeperalived+nginx高可用集群搭建教程

上一章节博主为大家介绍了目前大型互联网项目的系统架构体系,相信大家应该注意到其中很重要的一块知识nginx技术,在本节博主将为大家分享nginx的相关技术以及配置过程。 一、nginx相关概念 ...

em_aaron
今天
1
0
Apache Directory Studio连接Weblogic内置LDAP

OBIEE默认使用Weblogic内置LDAP管理用户及组。 要整理已存在的用户及组,此前办法是导出安全数据,文本编辑器打开认证文件,使用正则表达式获取用户及组的信息。 后来想到直接用Apache Dire...

wffger
今天
2
0
HFS

FS,它是一种上传文件的软件。 专为个人用户所设计的 HTTP 档案系统 - Http File Server,如果您觉得架设 FTP Server 太麻烦,那么这个软件可以提供您更方便的档案传输系统,下载后无须安装,...

garkey
今天
1
0
Java IO类库之BufferedInputStream

一、BufferedInputStream介绍 /** * A <code>BufferedInputStream</code> adds * functionality to another input stream-namely, * the ability to buffer the input and to * sup......

老韭菜
今天
0
0
STM 32 窗口看门狗

http://bbs.elecfans.com/jishu_805708_1_1.html https://blog.csdn.net/a1985831055/article/details/77404131...

whoisliang
昨天
1
0
Dubbo解析(六)-服务调用

当dubbo消费方和提供方都发布和引用完成后,第四步就是消费方调用提供方。 还是以dubbo的DemoService举例 -- 提供方<dubbo:application name="demo-provider"/><dubbo:registry address="z...

青离
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部