php+ajax文件上传进度条

最新推荐文章于 2023-03-06 13:57:52 发布

转载最新推荐文章于 2023-03-06 13:57:52 发布 · 1.3k 阅读

文章标签：

#ajax #php #action #include #iframe #border

PHP 专栏收录该内容

211 篇文章

订阅专栏

本文介绍了一种使用PHP实现文件上传进度显示的方法。通过创建一个名为UploadProgressMeter的类来跟踪上传进度，并利用Ajax技术实时更新进度条状态。文章提供了完整的代码示例，包括进度条样式表、表单部分及服务端脚本。

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>