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

AJAX技术
Ajax内部交流文档
建立XMLHttpRequest对象
AJAX初体验之实战篇:打造博客无刷新搜索
掌握AJAX
AJAX聊天室V1.0发布
Ajax实现评论提交
PPJOKE 0.1 (网页嵌入聊天)提供下载
Ajax标签导航效果(仿网易首页)
ajax实现标签导航
琥珀无限级分类联动菜单AJAX版
结合AJAX进行PHP开发之入门
AJAX开发简略 (第二部分)
国内首发 -- ajax完整功能框架
AJAX初级聊天室代码
Ajax.基础教程 电子书版 提供下载
AjaxUI:鼠标拖拽
一个AJAX自动完成功能的js封装源码[支持中文]
Ajax读取XML实现动态下拉导航
强烈推荐-ajax开发者必看的文章
asp+Ajax简单客户登陆验证

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-03   浏览: 36 ::
收藏到网摘: 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>