当前位置: 首页 > 图文教程 > 网络编程 > AJAX技术 > php+ajax文件上传进度条

AJAX技术
ajax poller
无框架 Ajax分页(原创)
AJAX 图片展示框架56个 提升开发效率
AJAX 客户端响应速度提高分析
揭开AJAX神秘的面纱(AJAX个人学习笔记)
Ajax Control Toolkit 34个服务器端控件
Ajax 核心框架函数及例子
AJAX 进度条实现代码
Unobtrusive的Web开发
ASP实例:ASP+AJAX制作无刷新新闻评论系统
Ajax和CSS设计的表格实例
css和Ajax制作的表格
AJAX结合CSS实现的网页Tab选项卡效果
实现一个基于Ajax的调查程序
ASP.NET+AJAX解决网页打开等待问题
XMLHttpRequest和AJAX虎视Web应用开发
IBM Google等巨头联手支持Open Ajax计划
php+ajax文件上传进度条
AJAX技术 vs 传统的ASP无刷新技术
利用ICallbackEventHandle实现类似AJAX的无刷新页面

AJAX技术 中的 php+ajax文件上传进度条


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-03   浏览: 28 ::
收藏到网摘: n/a

 
代码分为以下部分:
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>