`
jimphei
  • 浏览: 39573 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

PHP+JavaScript 实现动态显示服务器端运行进度条(转)

    博客分类:
  • php
阅读更多

我有一个 PHP 程序,需要循环调用 XMLRPC 500 次左右,运行 20 多分钟。当程序运行的时候,客户端只有一片空白的页面,浏览器的状态一直是 load。作为用户来说,这种等待是漫长的,埋怨也就多了。

解决思路

如果有个进度条呈现在用户面前,告诉用户服务器端正在干嘛,当前运行了多少,问题就可以得到基本解决,虽然没有减少服务器端的运行时间,但用户的心里会有微妙的变化,感觉不再是枯燥无味的等待,至少等待还有个盼头 :) 。

考虑到每一次调用 XMLRPC 比较耗时,所以可以在每一次调用时使用 PHP 的 flush() 函数输出一段 JavaScript 对客户端浏览器中进度条显示进行动态更新。


<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>--><?php
if ('source' == $_GET['act'])  //查看源代码
{
    show_source($_SERVER["SCRIPT_FILENAME"]);
     exit;
}
set_time_limit(0);

for ($i = 0; $i < 500; $i++)

    $users[] = 'Tom_' . $i;
}

$width = 500;   //显示的进度条长度,单位 px
$total = count($users); //总共需要操作的记录数
$pix = $width / $total; //每条记录的操作所占的进度条单位长度
$progress = 0;  //当前进度条长度
?>

<html>
<head>
<title>动态显示服务器运行程序的进度条</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Generator" content="JEdit">
<meta name="Author" content="Krazy Nio">
<style>
body, div input 
{}{ font-family: Tahoma; font-size: 9pt }
</style>
<script language="JavaScript">
<!--
function updateProgress(sMsg, iWidth)

    document.getElementById(
"status").innerHTML = sMsg;
    document.getElementById(
"progress").style.width = iWidth + "px";
    document.getElementById(
"percent").innerHTML = parseInt(iWidth / <?php echo $width; ?> * 100+ "%";
}

//-->
</script>    
</head>
<body>
<div style="margin: 4px; padding: 8px; border: 1px solid gray; background: #EAEAEA; width: <?php echo $width+8; ?>px">
  
<div><font color="gray">如下进度条的动态效果由服务器端 PHP 程序结合客户端 JavaScript 程序生成。</font></div>
  
<div style="padding: 0; background-color: white; border: 1px solid navy; width: <?php echo $width; ?>px">
    
<div id="progress" style="padding: 0; background-color: #FFCC66; border: 0; width: 0px; text-align: center;  height: 16px"></div> 
  
</div>
  
<div id="status">&nbsp;</div>
  
<div id="percent" style="position: relative; top: -30px; text-align: center; font-weight: bold; font-size: 8pt">0%</div>
</div>
<?php
flush();    //将输出发送给客户端浏览器
foreach ($users as $user)//在此处使用空循环模拟较为耗时的操作,实际应用中需将其替换;若你的操作不耗时,我想你就没必要使用这个脚本了)

    for ($i = 0; $i < 10000; $i++) { 
    ;;
}
?>
<script language="JavaScript">
updateProgress(
"正在操作用户“<?php echo $user; ?>” ."<?php echo min($width, intval($progress)); ?>);
</script>
<?php
flush();    //将输出发送给客户端浏览器,使其可以立即执行服务器端输出的 JavaScript 程序。
$progress += $pix;    
}   //end foreach
//  最后将进度条设置成最大值 $width,同时显示操作完成
?>
<script language="JavaScript">
updateProgress(
"操作完成!"<?php echo $width; ?>);
</script>
<?php
flush();
?>
<input type="button" value="查看源码" onclick="document.location.href='<?php echo $_SERVER['PHP_SELF']; ?>?act=source'" />
</body>
</html>

分享到:
评论

相关推荐

    php+javascript实现的动态显示服务器运行程序进度条功能示例

    该知识点主要介绍如何通过PHP和JavaScript组合来实现一个动态显示服务器端运行程序的进度条功能。以下为详细知识点阐述: ### PHP实现进度条基础逻辑 首先,通过PHP代码初始化一个数组,用于模拟服务器端需要处理...

    php+flash实现超大大文件上传带进度条

    服务器端PHP脚本返回已上传的块数,Flash据此更新进度条。 5. **合并文件**:所有文件块上传完成后,PHP脚本将它们合并成原始大文件。这个过程可能涉及到文件追加或使用流式读写操作。 6. **错误处理**:在上传...

    php与js实现进度条的操作

    因此,实现文件上传进度条的关键在于如何在不阻塞用户界面的情况下,让服务器端与客户端之间进行实时的数据交换。 ### 技术要点分析 #### 前端(JavaScript)实现 1. **HTML结构搭建**:如给定的部分内容所示,...

    用PHP编写的进度条

    标题中的“用PHP编写的进度条”指的是使用PHP语言实现的一种动态显示任务进度的技术。在网页应用中,进度条常用于展示数据加载、文件上传、处理过程等操作的进度,给用户一个可视化的反馈,提升用户体验。这个项目...

    php文件上传进度条集合

    综上所述,实现PHP文件上传进度条涉及前端和后端的密切配合,包括AJAX、HTML5 File API、分块上传、WebSocket通信、第三方库以及服务器端的进度管理等多个方面。在实际应用中,应根据项目需求选择合适的技术方案。

    php文件上传进度条

    在文件上传进度条的实现中,AJAX被用来异步获取服务器端上传进度信息,并实时更新页面上的进度条显示,从而提供更流畅的用户体验。 ### 实现步骤 #### 步骤一:创建UploadProgressMeter类 首先,需要创建一个`...

    php上传带进度条代码案例

    1. **文件上传**:PHP中的文件上传是通过`&lt;input type="file"&gt;`表单元素实现的,提交后在服务器端通过`$_FILES`全局数组接收上传的文件信息。在`upload.php`文件中,你需要处理文件的上传操作,包括验证文件类型、...

    PHP实现的进度条效果详解

    7. `flush()`:这是一个重要的函数,它会立即将服务器端的输出发送到客户端浏览器,使得用户可以看到进度条实时更新。 8. HTML 和 JavaScript 部分:创建一个简单的HTML页面结构,包括一个进度条容器、状态显示和...

    Ajax+PHP实现的模拟进度条功能示例

    为了实现进度条的动态显示,我们必须了解以下几点关键知识点。 首先,从本文提到的HTML结构开始分析,它包含了一个进度条和相应的文本提示,以及一个按钮用于启动进度条的动态更新。这个进度条使用了HTML和CSS技术...

    真正的多文件上传,可以显示进度条,并可随时终止上传

    SwfUpload通过回调函数与JavaScript交互,将上传进度信息传递到前端,然后在网页上动态更新进度条,实现可视化效果。 此外,SwfUpload还支持上传操作的控制。用户可以在上传过程中随时暂停、继续或者取消上传,这...

    php进度条代码实例(CProgBar Example).rar

    前端通过AJAX(异步JavaScript和XML)请求向服务器查询任务状态,而后端PHP脚本处理任务并返回当前进度。前端接收到进度信息后,更新HTML中的进度条元素,从而显示给用户。 在"CProgBar Example"中,主要包含以下几...

    h5实现的上传,自带进度条

    本教程将详细讲解如何使用H5和JavaScript实现一个具有进度条功能的文件上传功能。 首先,我们要了解HTML5引入的新特性——File API。File API允许开发者在用户浏览器中直接操作文件,如读取、写入和上传。它包括...

    JS插件plupload.js实现多图上传并显示进度条

    标题中的“JS插件plupload.js实现多图上传并显示进度条”指的是使用JavaScript插件plupload.js来处理用户在网页上选择并上传多张图片的功能,并且在上传过程中显示实时的进度条,以便用户了解文件上传的状态。...

    基于PHP的AJAXBar php网站进度条通用脚本程序.zip

    AJAXBar通常指的是在页面顶部或底部显示的进度条,当有后台数据请求或处理时,该进度条会动态显示加载进度。 【标签】“php”表明此脚本主要基于PHP编程语言编写,PHP是一种广泛应用于Web开发的开源服务器端脚本...

    ajax+js文件上传+进度条

    为了提供更好的用户体验,开发者通常会使用Ajax和JavaScript来实现异步文件上传,并配合进度条显示上传进度。这样,用户无需等待整个文件上传完成就能看到实时进度,提高了交互性。本教程将通过一个可运行的例子详细...

    jquery_uploadify实现的下载进度条

    设置参数如`queueID`(队列的ID)、`uploader`(服务器端处理脚本)、`fileExt`(允许的文件扩展名)、`fileSizeLimit`(文件大小限制)、`auto`(是否自动上传)以及`onProgress`事件处理函数,用于显示进度条。...

    Ajax批量上传显示进度条

    服务器端通常需要接收这些文件并保存到指定位置。在Node.js中,可以使用multer中间件处理multipart/form-data类型的请求,而在PHP中,可以使用`$_FILES`全局变量获取上传的文件信息。 最后,需要注意的是,虽然...

    layui文件上传带进度条显示.zip

    本资源"layui文件上传带进度条显示.zip"结合了`layui`与`PHP`,实现了文件上传过程中带有进度条的交互效果,提升了用户体验。 首先,我们要理解`layui`的文件上传组件是如何工作的。`layui`的上传组件基于HTML5的`...

    拖动上传图片带进度条vue+ js+php.zip

    【标题】中的“拖动上传图片带进度条vue+ js+php.zip”表明这是一个使用Vue.js、JavaScript和PHP技术实现的图片上传功能,且具备拖放操作和上传进度条显示。这种功能通常用于提高用户体验,让用户能直观地了解图片...

    带进度条的上传文件源码

    这个标题为“带进度条的上传文件源码”的项目,是一个myEclipse工程,它提供了一个实现文件上传过程中显示进度条的功能,确保用户在等待文件上传时能够清楚地看到进度,从而降低用户的不耐烦感并增加使用满意度。...

Global site tag (gtag.js) - Google Analytics