php下传进度条的代码，但是js走不通，

2013-01-11

php上传进度条的代码，但是js走不通，求助，急！前台代码htmltitlePHP+Ajax带进度条文件上传/titlehead

php上传进度条的代码，但是js走不通，求助，急！
前台代码


<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="upload2.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>

php代码upload2.php


 * Created on 2010-4-16 
 * 
 * To change the template for this generated file go to 
 * Window - Preferences - PHPeclipse - PHP - Code Templates 
 */  
 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);}  
  
if(isset($_GET['key']))  
{  
    //header('Content-Type:application/json; charset=utf-8' ) ;  
    // Retrieve the status using the getStatus() function below  
    //echo json_encode(getStatusAPC());  
    echo json_encode(getStatusAPC());  
}  
function getStatusAPC()  
{  
    $response=false;  
    if($status = apc_fetch('upload_'.$_GET['key'])) {  
          
        $response=apc_fetch('upload_'.$_GET['key']);  
          
    }  
    return $response;  
}  
  
?>

报js85行有错
SyntaxError: syntax error
[在此错误处中断]
var prgs=eval("(" + request.responseText + ")");
php下传进度条的代码，但是js走不通，

新手求指教，急
[解决办法]
应该是不符合json格式的字符串，导致eval出错了，php组合成符合json格式的字符串或者使用json_encode将对象转换为json字符串，而不是直接输出对象，参考：PHP JSON使用教程

alert(request.responseText)//输出看看是什么内容
var prgs=eval("(" +  request.responseText + ")");

[解决办法]
那就是输出为空你那个php页面，ajax指定为get，但是你php判断了post提交，当然没有输出了

request.open("GET","upload.php?key="+rdm+"&sim=" + (++count),true);

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

而且要注意，纯ajax无法上传文件，用flash或者隐藏iframe来模拟
ajax无刷新上传文件，使用iframe模仿

flash uploadify

热点排行