52,797
社区成员
发帖
与我相关
我的任务
分享新人求助，Ajax+php带进度条上传问题
我刚学php，想做个Ajax的带进度条上传的效果，用了php的apc模块，
现在用firebug单步调试时可以显示进度条的变化，但是运行的时候就没有反应，
实在不知道怎么回事了，有哪位高人给指点一下，谢谢了
这里是代码，大家帮我看看吧
这里是后台的php代码
期待大家的回答
现在用firebug单步调试时可以显示进度条的变化，但是运行的时候就没有反应，
实在不知道怎么回事了，有哪位高人给指点一下，谢谢了
这里是代码，大家帮我看看吧
<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;
}
</style>
</head>
<body>
<iframe style="visibility:hidden" 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;
function startUpload()
{
rdm=Math.floor(Math.random()*100000000);
document.getElementById('remark').setAttribute('value',rdm);
document.getElementById("progress").style['display']='block';
creatXmlHttpRequest();
begin=setInterval(doRequest,100);
};
function creatXmlHttpRequest()
{
if(window.ActiveXObject)
{request=new ActiveXObject("Microsoft.XMLHTTP")}
else{request=new XMLHttpRequest();}
};
var count=0;
function doRequest()
{
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;
//alert(prgs);
var cur=parseInt(prgs.current);
var total=parseInt(prgs.total);
var pecentIs=cur/total*100;
alert(pecentIs);
if(pecentIs==100)
{
document.getElementById("pecent").style['width']="200px";
clearInterval(begin);
}else{
// alert(prgs);
document.getElementById("pecent").style['width']=pecentIs*2+"px";
}
}
};
})();
</script>
</body>
</html>
这里是后台的php代码
<?php
if(isset($_GET['key']))
{
echo json_encode(getStatusAPC());
}
function getStatusAPC()
{
$response=false;
if($status = apc_fetch('upload_'.$_GET['key'])) {
$response=apc_fetch('upload_'.$_GET['key']);
}
return $response;
}
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
$myfile=$_FILES['upfile'];
echo $myfile['size'];
echo $myfile['size'];
print_r($myfile);
$tempf=$myfile['tmp_name'];
$name=$myfile['name'];
move_uploaded_file($tempf,'up/'.$name);}
?>
期待大家的回答
...全文
请发表友善的回复…
发表回复
seyajin 2010-05-08
- 打赏
- 举报
刚刚开始学习ajax，很好的例子，多谢。
yangyu102198 2010-04-22
- 打赏
- 举报
晕 有点搞了
hj149 2010-04-21
- 打赏
- 举报
终于给我发现了，每次发起Ajax请求时必须重新创建xmlhttpreqest对象，而不能使用上次创建的，这个纳闷，无以言表，结贴
hj149 2010-04-21
- 打赏
- 举报
是啊，这个是用setTimeout作的，在handle里加了个settimeout，可以在火狐下运行，但是在ie下就不行，我感觉是request返回数据客户的接受有问题，但不是到该怎么弄，
<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,100);
};
function creatXmlHttpRequest()
{
if(window.ActiveXObject)
{request=new ActiveXObject("Microsoft.XMLHTTP")}
else{request=new XMLHttpRequest();}
};
var count=0;
function doRequest()
{
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,100);
pec.style['width']=pecentIs*2;
}
}
};
})();
</script>
</body>
</html>
yangyu102198 2010-04-21
- 打赏
- 举报
把settimeout加一个到handle中试试 加个条件
yangyu102198 2010-04-21
- 打赏
- 举报
看着应该用setinterval没问题啊 吧100的值设大一点看
hj149 2010-04-21
- 打赏
- 举报
现在我改用setTimeout嵌套式可以了，但是只能在火狐下运行，在ie下这个setTimeout嵌套还是只执行一次，无语了，真难弄
KK3K2005 2010-04-21
- 打赏
- 举报
[Quote=引用 1 楼 hj149 的回复:]
哎，没人理，我自己发现问题了，我发现JavaScript代码里用setTimeout函数嵌套就可以，但是用setInterval就不行，这是为什么呢？这不是一回事吗怎么一个行一个就不行呢？
[/Quote]
明显不是一回事情
哎，没人理，我自己发现问题了，我发现JavaScript代码里用setTimeout函数嵌套就可以，但是用setInterval就不行，这是为什么呢？这不是一回事吗怎么一个行一个就不行呢？
[/Quote]
明显不是一回事情
lsq667 2010-04-21
- 打赏
- 举报
友情帮顶吧
hj149 2010-04-20
- 打赏
- 举报
哎，没人理，我自己发现问题了，我发现JavaScript代码里用setTimeout函数嵌套就可以，但是用setInterval就不行，这是为什么呢？这不是一回事吗怎么一个行一个就不行呢？
