PHP文件上传过程中的进度条效果怎样做的-群英

上一篇：PHP引入函数有哪些，功能及用法是什么下一篇：PHP中如何设置cookie过期时间与值为空

在实际应用中，我们有时候会遇到“PHP文件上传过程中的进度条效果怎样做的”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“PHP文件上传过程中的进度条效果怎样做的”文章能帮助大家解决问题。

在PHP5.4以前, 我们可以通过APC提供的功能来实现. 或者使用PECL扩展uploadprogress来实现.

虽然说, 它们能很好的解决现在的问题, 但是也有很明显的不足:

1. 他们都需要额外安装(我们并没有打算把APC加入PHP5.4)
2. 它们都使用本地机制来存储这些信息, APC使用共享内存, 而uploadprogress使用文件系统(不考虑NFS), 这在多台前端机的时候会造成麻烦.

程序需要php的apc模块的支持，关键点就是在上传的form里添加一个hidden的inpu标签，里面要有name为

APC_UPLOAD_PROGRESS的属性，value值为一个随机数一遍多个人上传。

apc模块的安装方法是，下载php_apc.dll放到ext文件夹下，在php.ini文件里添加

upload_max_filesize =100M
apc.rfc1867 = on
apc.max_file_size = 100M

extension=php_apc.dll

然后测试配置是否成功：
if(apc_fetch)

{echo "apc is working"}

else{echo "apc is not supported!";}

运行效果截图

下面是源码

1 前台页面：

Html代码

<html>
<title>PHP+Ajax带进度条文件上传</title>
<head>
<style type="text/css">
#progress{
border:2px red solid;
width:200px;
height:20px;
display:none;
}
#pecent{
background-color:green;
display:block;
width:0px;
height:20px;
color:yellow;
}
</style>
</head>
<body>
<iframe style="display:none" name="ifm"></iframe>
<form enctype="multipart/form-data" method="POST" action="upload.php" target="ifm" name="myform">
<input type="hidden" name="APC_UPLOAD_PROGRESS" id="remark" >
<input type="file" name="upfile"/>
<input type="submit" value="上传" name="sub"/>
</form>
<div id="progress" class="before"><span id="pecent"></span></div>
<script type="text/javascript">
(function(){
function addEvent( node, type, listener ) {
if (node.addEventListener) {
// W3C method
node.addEventListener( type, listener, false );
return true;
} else if(node.attachEvent) {
// MSIE method
node['e'+type+listener] = listener;
node[type+listener] = function(){node['e'+type+listener]( window.event );}
node.attachEvent( 'on'+type, node[type+listener] );
return true;
}
// Didn't have either so return false
return false;
};
var submit=document.forms["myform"];
addEvent(submit,'submit',startUpload);
var begin;
var request;
var rdm;
var pec=document.getElementById("pecent");
function startUpload()
{
rdm=Math.floor(Math.random()*100000000);
document.getElementById('remark').setAttribute('value',rdm);
document.getElementById("progress").style['display']='block';
//creatXmlHttpRequest();
begin=setTimeout(doRequest,1000);
};
function creatXmlHttpRequest()
{
if(window.ActiveXObject)
{request=new ActiveXObject("Microsoft.XMLHTTP")}
else{request=new XMLHttpRequest();}
};
var count=0;
function doRequest()
{
if(window.ActiveXObject)
{request=new ActiveXObject("Microsoft.XMLHTTP");}
else{request=new XMLHttpRequest();}
if(request!=null){
request.onreadystatechange=handle;
request.open("GET","upload.php?key="+rdm+"&sim=" + (++count),true);
request.send();
}
};
function handle()
{
if(request.readyState==4&&request.status==200)
{
//接受服务器数据
var prgs=eval("(" + request.responseText + ")");
//var prgs=request.responseText;
var cur=parseInt(prgs.current);
var total=parseInt(prgs.total);
var pecentIs=Math.round(cur/total*100);
pec.innerHTML=pecentIs.toString()+"%";
if(100==pecentIs)
{
pec.style['width']="200px";
clearTimeout(begin);
}else{
begin=setTimeout(doRequest,1000);
//alert(pecentIs);
pec.style['width']=pecentIs*2;
}
}
};
})();
</script>
</body>
</html>