繁体中文
设为首页
加入收藏
当前位置:网页设计首页 >> AJAX >> php+ajax文件上传进度条

php+ajax文件上传进度条

2007-12-27 13:10:01  作者:  来源:  浏览次数:34  文字大小:【】【】【

代码分为以下部分:

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上传文件并显示进度条

责任编辑:


相关文章
 

最新文章

更多

· XMLHttpRequest对象详解
· JQuery 使用手册(6-7) 事...
· JQuery 使用手册(4-5)
· JQuery 使用手册(3) CSS操作
· JQuery 使用手册(2) 二:...
· JQuery 使用手册(1)
· jQuery1.2选择器
· ASP.NET AJAX Beta2 调用...
· 在ASP.NET AJAX中别使用...
· asp简单的ajax留言板(采...

推荐文章

更多

· XMLHttpRequest对象详解
· JQuery 使用手册(6-7) 事...
· JQuery 使用手册(4-5)
· JQuery 使用手册(3) CSS操作
· JQuery 使用手册(2) 二:...
· JQuery 使用手册(1)
· jQuery1.2选择器
· ASP.NET AJAX Beta2 调用...
· 在ASP.NET AJAX中别使用...
· asp简单的ajax留言板(采...

热点文章

更多