前往顾页
以后地位: 主页 > 收集编程 > Ajax实例教程 >

ajax与PHP连络实现文件上传进度条 实例教程

时候:2013-07-11 00:36来源:知行网www.zhixing123.cn 编辑:麦田守望者

尝试环境:办事器是ubuntu11.04桌面版,apache2.2,firefox 6.0,PHP5.3
上传文件对用户而言,是一个及其冗长而烦人的过程,经由过程明天的学习,我们可以给用户一个直观的显现进度,即用户上传的文件上传的百分比。并可以连络呼应的前端表示情势,做出丰富的表示结果。
起首,需求在办事器端的PHP上装置php_apc。很多文章让下载源代码,解压,然后phpize,./configure.make ,make install.但是,有的时候会编译不经由过程,所以,经由过程一些主动的事情来完成。
# sudo apt-get install php-pear php5-dev apache2-threaded-dev
装置呼应的前提前提。
注:作者编译装置的时候,老是呈现错误,估计是因为贫乏apache2-threaded-dev。
然后经由过程pecl装置php_apc。号令以下:
# sudo pecl install apc
其实和编译装置是一个过程,只是将下载编译装置调集到了一个法度当中,当然如许也让我们省去了很多的费事。
装置完了,当然要建设apc。在/etc/php5/conf.d中新建一个ini文件,名字肆意。作者将一些后续装置的PHP扩展和一些本身写的扩展的建设放到了一个叫做custom.ini的文件中,在此中插手一些apc的建设。

[php_apc]
extension=apc.so
apc.rfc1867 = on
apc.max_apc.maxfile_size=4096M //为了本地上传文件测试看到结果,所以调度很年夜,如果是实在的利用法度,建议该值取相对小一点。

然后建设上传文件的部分。
在/etc/php5/apache2/php.ini中,将post_max_size和upload_max_filesize设置的适合相关前提,作者设置的都是4096M.

接着开端写代码了。为了利用户上传文件今后仍然保存到以后页面,用Iframe来布局。同时,经由过程apc获得上传进度,需求一个独一值ID。可以用uniqid来获得。接着为了实现进度条静态显现,需求每隔一段时候向办事器请求一次,请求的页面前往上传的进度。一个function来显现百分比。另有当单击上传页面的时候,调用容器页面中的函数,可以用window.parent.func_name来履行。

总的代码progress.php以下:

<?php $id = uniqid(""); ?>
<script type="text/javascript" language="javascript" src="http://tmsdk.sinaapp.com/javascript/jquery.1.6.2.js"></script><script type="text/javascript">// <![CDATA[
function getProgress(){
$.ajax({
url:'getprogress.php?progress_key=<?php echo $id ?>',
type:'get',
success:function(msg){
showPersent(msg);
}
});
}
function showPersent (percent) {
document.getElementById("progressinner").style.width = percent+"%";
if (percent < 100){
setTimeout("getProgress()", 100);
}
}
function startProgress(){
document.getElementById("progressouter").style.display="block";
getProgress();
}
</script>

<iframe id="theframe" style="height: 100px; width: 400px;" name="theframe" src="upload.php?id=<?php echo($id) ?>" width="320" height="240"></iframe>


上传文件页面upload.php代码:

<?php $id = $_GET['id']; ?>
<form id="upload_form" action="target.php" method="POST" enctype="multipart/form-data">
<input id="progress_key" type="hidden" name="APC_UPLOAD_PROGRESS" />
value="<!--?php echo $id?-->"/>
<input id="test_file" type="file" name="test_file" />
<input onclick="window.parent.startProgress(); return true;" type="submit" value="Upload!" /></form>

获得上传进度getprogress代码:

<!--?php if(isset($_GET['progress_key'])) { $status = apc_fetch('upload_'.$_GET['progress_key']); echo $status['current']/$status['total']*100; } ?-->

住:

$status
工具是具有以下字段的数组:

 

total
 

文件的总年夜小
 

current
 

到目前为止收到的文件数
 

rate
 

上传速率(以字节每秒为单位)
 

filename
 

文件名
 

name
 

变量名
 

temp_filename
 

PHP 保存文件的临时正本的地位
 

cancel_upload
 

上传是已打消 (1),还是未打消 (0)
 

done
 

上传是已完成 (1),还是还没有完成 (0)
上传呼应文件target.php代码:

<?php

if($_SERVER['REQUEST_METHOD']=='POST') {

move_uploaded_file($_FILES["test_file"]["tmp_name"], "/tmp/" . $_FILES["test_file"]["name"]);

echo "<p>File uploaded. Thank you!</p>";

}

?>

 

------分开线----------------------------
标签(Tag):ajax Ajax实例教程 Ajax根本教程 Ajax源代码 Ajax技能
------分开线----------------------------
保举内容
猜你感兴趣