文档章节

ajax php 进度条

wankaiming
 wankaiming
发布于 2010/11/05 10:54
字数 454
阅读 758
收藏 2

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

粉丝 72
博文 227
码字总数 61416
作品 0
广州
高级程序员
私信 提问
一些文件上传组件(Flash,JQuery,asp,php,js,AJAX)

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

老朱教授
2017/10/01
0
0
php 大文件上传 进度条实现

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

GentleTroy
2012/03/01
4.3K
9
7款基于JavaScript和AJAX的文件上传插件

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

EDIAGD
2013/09/23
0
0
jquery 的ajax 上传进度条

一直在用ajax,但是没有做进度条,原来$.ajax里面封装了xhr,只要从这里面取得上传进度。 这是将回调写到变数里 将xhr对像放到 $.ajax({....,xhr}); 绑定到'progress' 这里要自己再定义progr...

吴孝青
03/31
0
0
利用FormData进行ajax上传文件

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

单蛙
2016/06/17
3.1K
0

没有更多内容

加载失败,请刷新页面

加载更多

redis数据结构

redis不只是一个简单的键(key)-值(value)数据库,实际上它是一个数据结构服务器,支持各种类型的值。也就是说,在传统的键-值数据库中,你把字符串键与字符串值联系起来,而在redis,值不仅限...

hblt-j
4分钟前
0
0
MySQL事务的的介绍及使用

1. 事务的特性 1.1 原子性(Atomicity): 原子性是指事务是一个不可分割的工作单位,事务中的操作要么都发生,要么都不发生。 1.2. 一致性(Consistency): 在一个事务中,事务的前后数据的完...

kuchawyz
9分钟前
0
0
[sed] 将 the 和 statement 之间的单词变为全大写

-bash-4.1$ cat textfind the Match statementConsult the Get statementusing the Read statement to retrieve data-bash-4.1$ cat sedsrc1/the .* statement/{hs/.*the (.......

圣洁之子
10分钟前
0
0
curl 编译安装(openssl)

//依赖安装yum install openssl openssl-develwget https://curl.haxx.se/download/curl-7.63.0.tar.gztar -zvxf curl-7.63.0.tar.gzcd curl-7.63.0./configure --prefix=......

colin_86
10分钟前
0
0
Canvas之使用图片

canvas有比较强的图片操作能力。可以用于动态的图像合成或者作为图形的背景。浏览器支持任意格式如PNG、GIF、或者JPEG,你甚至可以将同一个页面中的其他canvas元素生成的图片作为图片源(toDa...

tianyawhl
13分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部