DIV CSS 佈局教程網

代碼分為以下部分:

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>