文档章节

ajax php 进度条

wankaiming
 wankaiming
发布于 2010/11/05 10:54
字数 454
阅读 759
收藏 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
博文 232
码字总数 63672
作品 0
广州
高级程序员
私信 提问
加载中

评论(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
5.1W
9
7款基于JavaScript和AJAX的文件上传插件

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

EDIAGD
2013/09/23
309
0
Web设计与开发终极资源大全(上)

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

红薯
2010/03/18
1.6K
3
Ajax在线文件管理--SFBrowser

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

匿名
2008/09/19
3K
1

没有更多内容

加载失败,请刷新页面

加载更多

文献速递20200524

一 文献题目:Characterizing the Causal Pathway for Genetic Variants Associated with Neurological Phenotypes Using Human Brain-Derived Proteome Data 不想看英文题目:使用人脑蛋白质......

osc_mbhfa1vl
28分钟前
9
0
【Java入门】JDK安装和环境变量配置(Win7版)

系统环境:Windows7 x64 安装JDK和JRE版本:1.8.0_191 1、下载JDK安装包 Oracle官网下载网址:https://www.oracle.com/technetwork/java/javase/downloads/index.html 选择需要下载的JDK版本...

osc_s7aj86hu
29分钟前
11
0
Android Q 指纹解锁流程

Android Q 指纹解锁流程 // Authentation Finger Schedule: (close Screen, Authentation with finger(Success))        // PhoneWindowManager        mKeyguardDelegate.onStar......

osc_0qnrwmy3
31分钟前
12
0
List的扩容机制,你真的明白吗?

一:背景 1. 讲故事 在前一篇大内存排查中,我们看到了Dictionary正在做扩容操作,当时这个字典的count=251w,你把字典玩的66飞起,其实都是底层为你负重前行,比如其中的扩容机制,当你遇到...

osc_34b9n45c
32分钟前
14
0
2020.04.12软件更新公告

原创软件区升级ComicsViewer、DjVuToy、Pdg2Pic、PdgRenamer、PdgThumbViewer

osc_6tgtqi6v
33分钟前
23
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部