找到一篇文章PHP AJAX File Upload Progress Meter Updates,介绍如何用php Pear:HTML_AJAX制作带有进度条的文件上传,下面是我测试上传时的示意图
代码分为以下部分:
demo.php - 上传过程处理
PLAIN TEXTPHP:

<?php include 'UploadProgressMeter.class.php'; $fileWidget = new UploadProgressMeter(); if ($fileWidget->uploadComplete()) {        // 上传完毕的时候,从iframe发送一个js到主窗口表示一切ok        echo $fileWidget->finalStatus();         // 处理上传后的文件...         exit;}?>

demoserver.php - ajax的服务端js,使用Pear:HTML_AJAX,直接调用UploadProgressMeterStatus类
PLAIN TEXTHTML:

<script src="http://www.ooso.net/demoserver.php?client=main,request,httpclient,dispatcher,json,util" type="text/javascript"></script><script src="http://www.ooso.net/demoserver.php?stub=UploadProgressMeterStatus" type="text/javascript"></script><?php echo $fileWidget->renderIncludeJs(); ?>

进度条的样式表
PLAIN TEXTCSS:

.progressBar {  position: relative;  padding: 2px;  width: 300px;  height: 40px;  font-size: 14px;}.progressBar .background {  border: solid 1px black;  width: 270px;  height: 20px;}.progressBar .bar {  position: relative;  background-color: blue;  width: 0px;  height: 20px;}

表单部分
PLAIN TEXTHTML:

<form action="demo.php" method="post" enctype="multipart/form-data">renderFormExtra(); ?>><?php echo $fileWidget->renderHidden(); ?></form><form action="demo.php" method="post" enctype="multipart/form-data"><label>Select File: </label><div><?php echo $fileWidget->render(); ?><?php echo $fileWidget->renderProgressBar(); ?></div></form>

demo下载 - 密码是www.ooso.net
作者的svn浏览
其它类似项目:
http://pdoru.from.ro/ - 要以patch的形式和php一起编译
http://www.ugia.cn/?p=54 - 以socket上传文件并显示进度条
作者: volcano 发表于3月 15, 2006 at 10:39 am
版权信息: 可以任意转载, 转载时请务必以超链接形式标明文章原始出处和作者信息及此声明
永久链接 - [url]http://www.ooso.net/index.php/archives/169[/url]