如何实现jquery php进度条

我有一个多步骤表单，其中Step3上的表单提交到Step4.php。Step4是一个结果页面，加载需要一些时间，所以我想在用户在实际加载Step4.php之前单击step3提交按钮时，尝试实现一个进度条或加载条之类的东西。我想我可以用jquery来做这个？但是，我不知道怎么做。不必使用jquery将数据发布到step4.php，就可以做到这一点吗？

很难为ajax请求创建进度条。您实际上没有访问请求的权限，无法通过进度条向用户提供准确的信息。最好给用户一个微调器，向他们显示脚本正在加载内容。

为ajax请求制作进度条非常困难。您实际上没有访问请求的权限，无法通过进度条向用户提供准确的信息。最好给用户一个微调器，向他们显示脚本正在加载内容。

正如peter所说，这在ajax中很难做到。通常人们所做的是使用一个小的Flash小程序，它提供文件上传和进度条。我知道Gmail和Wordpress都是这样做的，还有很多其他的。有许多预先制作好的，您只需访问并使用即可：

---

正如peter所说，从ajax实现这一点非常困难。通常人们所做的是使用一个小的Flash小程序，它提供文件上传和进度条。我知道Gmail和Wordpress都是这样做的，还有很多其他的。有许多预先制作好的，您只需访问并使用即可：

---

如果这是上传进度条：

第一部分是在PHP端安装一些可以钩住的东西

扩展包括一个上传钩子机制。您可能已经安装了它，因为它是PHP的通用操作码缓存（默认情况下将包含在PHP6中）

一旦安装了APC，就需要同时设置PHP页面和PHP处理程序

PHP页面：

<?php
    $uploadId = uniqid('', true);
?>

<script type="text/javascript">
    function uploadProgress() {
        $.ajax({
            url: 'url/to/handler.php',
            data: ({ progressId: <?php echo $uploadId; ?> }),
            success: displayProgress
        });
    }

    function displayProgress(data) {
        // Do something with data['current'] and data['total'] here
        // Possibly using a JQuery UI Progressbar
        // http://jqueryui.com/demos/progressbar/
    }
</script>

函数uploadProgress（）{
$.ajax({
url:'url/to/handler.php'，
数据：（{progressId:}），
成功：显示进步
});
}
功能显示进度（数据）{
//在这里对数据['current']和数据['total']进行处理
//可能使用JQuery UI进度条
// http://jqueryui.com/demos/progressbar/
}

如果这是上载进度条：

第一部分是在PHP端安装一些可以钩住的东西

扩展包括一个上传钩子机制。您可能已经安装了它，因为它是PHP的通用操作码缓存（默认情况下将包含在PHP6中）

一旦安装了APC，就需要同时设置PHP页面和PHP处理程序

PHP页面：

<?php
    $uploadId = uniqid('', true);
?>

<script type="text/javascript">
    function uploadProgress() {
        $.ajax({
            url: 'url/to/handler.php',
            data: ({ progressId: <?php echo $uploadId; ?> }),
            success: displayProgress
        });
    }

    function displayProgress(data) {
        // Do something with data['current'] and data['total'] here
        // Possibly using a JQuery UI Progressbar
        // http://jqueryui.com/demos/progressbar/
    }
</script>


函数uploadProgress（）{
$.ajax({
url:'url/to/handler.php'，
数据：（{progressId:}），
成功：显示进步
});
}
功能显示进度（数据）{
//在这里对数据['current']和数据['total']进行处理
//可能使用JQuery UI进度条
// http://jqueryui.com/demos/progressbar/
}



我在一个MySQL加载程序中解决了这个问题，用进度条输出一个简单的页面，用flush（）刷新输出。然后，我输出一个简单的javascript片段：

    $('#progressbar').progressbar({value: 0});
在输出这个JS代码片段后，我还调用flush。每次要更新progressbar时，都必须不断输出这些代码段。
我在MySQL加载程序中解决了这个问题，方法是用进度条输出一个简单的页面，用flush（）刷新输出。然后，我输出一个简单的javascript片段：

    $('#progressbar').progressbar({value: 0});
在输出这个JS代码片段后，我还调用flush。每次要更新进度条时，都必须不断输出这些代码段。
一个简单的PHP上载进度条：

在upload.php中

<?php  
   //get unique id 
   $up_id = uniqid();  
?> 


谢谢，
Chintu
一个简单的PHP上传进度条：

在upload.php中

<?php  
   //get unique id 
   $up_id = uniqid();  
?> 


谢谢，
Chintu
好的。我会很乐意的。。。同样的问题。。。不必使用jquery提交表单，我可以这样做吗？有旋转器的插件吗？我现在在谷歌上搜索，但我真的似乎只是在寻找关于进度条和上传的东西…@petersendidit：或者你可以做一个安慰剂进度条，它估计当前完成的百分比@基蒂杨：微调器只是.gif图像@KittyYoung如果你正在上传一个文件，那么进度条是一个更好的选择。如果您正在等待服务器的响应，那么就很难了。像agscala侧面一样，旋转器只是一个动画gif图像。谢谢你的帮助。。。我想检查这两个，但我想我不能！好啊我会很乐意的。。。同样的问题。。。不必使用jquery提交表单，我可以这样做吗？有旋转器的插件吗？我现在在谷歌上搜索，但我真的似乎只是在寻找关于进度条和上传的东西…@petersendidit：或者你可以做一个安慰剂进度条，它估计当前完成的百分比@基蒂杨：微调器只是.gif图像@KittyYoung如果你正在上传一个文件，那么进度条是一个更好的选择。如果您正在等待服务器的响应，那么就很难了。像agscala侧面一样，旋转器只是一个动画gif图像。谢谢你的帮助。。。我想检查这两个，但我想我不能！
 <?php 

 $url = basename($_SERVER['SCRIPT_FILENAME']); 

 //Get file upload progress information. 
 if(isset($_GET['progress_key'])) { 
$status = apc_fetch('upload_'.$_GET['progress_key']); 
echo $status['current']/$status['total']*100; 
die; 
 } 
 // 

 ?> 

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script> 
 <link href="style_progress.css" rel="stylesheet" type="text/css" /> 

 <script> 
 $(document).ready(function() {  

setInterval(function()  
    { 
$.get("<?php echo $url; ?>?progress_key=<?php echo $_GET['up_id']; ?>&randval="+ Math.random(), {  
    //get request to the current URL (upload_frame.php) which calls the code at the top of the page.  It checks the file's progress based on the file id "progress_key=" and returns the value with the function below:
}, 
    function(data)    //return information back from jQuery's get request 
        { 
            $('#progress_container').fadeIn(100);    //fade in progress bar     
            $('#progress_bar').width(data +"%");    //set width of progress bar based on the $status value (set at the top of this page) 
            $('#progress_completed').html(parseInt(data) +"%");    //display the % completed within the progress bar 
        } 
    )},500);    //Interval is set at 500 milliseconds (the progress bar will refresh every .5 seconds) 

 }); 


 </script> 

 <body style="margin:0px"> 
 <!--Progress bar divs--> 
 <div id="progress_container"> 
<div id="progress_bar"> 
       <div id="progress_completed"></div> 
</div> 
 </div> 
 <!----> 
 </body>

/*iframe*/
#upload_frame {
    border:0px;
    height:40px;
    width:400px;
    display:none;
}

#progress_container {
    width: 300px; 
    height: 30px; 
    border: 1px solid #CCCCCC; 
    background-color:#EBEBEB;
    display: block; 
    margin:5px 0px -15px 0px;
}

#progress_bar {
    position: relative; 
    height: 30px; 
    background-color: #F3631C; 
    width: 0%; 
    z-index:10; 
}

#progress_completed {
    font-size:16px; 
    z-index:40; 
    line-height:30px; 
    padding-left:4px; 
    color:#FFFFFF;
}