首页 / 脚本样式 / Ajax / php+ajax文件上传进度条

php+ajax文件上传进度条2007-04-26代码分为以下部分:

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>