Question

我有一个多步骤表单，其中Step3上的表单提交到Step4.php。 Step4是一个结果页面，加载需要一些时间，所以当用户在Step4.php实际加载之前单击step3提交按钮时，我想尝试实现进度条或加载栏等。我想我可以用jquery做到这一点？但是，我不确定如何。是否可以这样做而不必使用jquery将数据发布到step4.php？

Answer 1

很难为ajax请求执行进度条。您无法真正访问请求，以便通过进度条为用户提供准确的信息。你最好给用户一个微调器，告诉他们脚本正在加载东西。

Answer 2

正如皮特所说，从ajax很难做到这一点。通常人们会使用一个小的Flash小程序来提供文件上传和进度条。我知道Gmail和Wordpress都会这样做，还有很多其他的。有许多预制的，你只需要投入使用：

Answer 3

如果这是上传进度条：

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

APC扩展程序包含一个上传挂钩机制。您可能已经安装了这个，因为它是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>

...

<!-- Your other form elements would be on this form, too -->
<form action="step4.php" enctype="multipart/form-data">
<input type="hidden" name="APC_UPLOAD_PROGRESS" value="<?php echo uploadId; ?>" />
<input type="file" name="file" />
<input type="submit" onClick="setInterval(uploadProgress, 1000); return false;" />
</form>

您还需要PHP端的脚本才能通过AJAX进行调用。自从我用PHP完成AJAX以来已经有一段时间了，但是这样的事情应该这样做：

<?php
$returnData = array('current' => 0, 'total' => 0);

if (!empty($_GET['progressId'])) {

    $uploadProgress = apc_fetch('upload_' . $_GET['progressId']);
    if (!empty($uploadProgress)) {
        $returnData['current'] = $uploadProgress['current'];
        $returnData['total'] = $uploadProgress['total'];
    }
}

echo json_encode($returnData);

编辑：哎呀，原帖中没有任何内容表明这是一个上传进度条

Answer 4

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

    $('#progressbar').progressbar({value: 0});

我在输出这个JS片段后也调用了flush。每次要更新进度条时，都必须不断输出这些片段。

Answer 5

简单的PHP上传进度条：

在upload.php中

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

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  <html xmlns="http://www.w3.org/1999/xhtml"> 
        <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
        <title>Upload your file</title> 

        <!--Progress Bar and iframe Styling--> 
        <link href="style_progress.css" rel="stylesheet" type="text/css" /> 

        <!--Get jQuery--> 
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script> 

        <!--display bar only if file is chosen--> 
        <script> 

        $(document).ready(function() {  


        //show the progress bar only if a file field was clicked 
      var show_bar = 0; 
      $('input[type="file"]').click(function(){ 
          show_bar = 1; 
}); 

  //show iframe on form submit 
$("#form1").submit(function(){ 

    if (show_bar === 1) {  
        $('#upload_frame').show(); 
        function set () { 
            $('#upload_frame').attr('src','upload_frame.php?up_id=<?php echo $up_id; ?>'); 
        } 
        setTimeout(set); 
    } 
      }); 

  }); 

  </script> 

  </head> 

  <body> 
  <h1>Upload your file </h1> 

  <div> 
    <?php if (isset($_GET['success'])) { ?> 
    <span class="notice">Your file has been uploaded.</span> 
    <?php } ?> 
    <form action="" method="post" enctype="multipart/form-data" name="form1" id="form1"> 
      Name<br /> 
      <input name="name" type="text" id="name"/> 
      <br /> 
      <br /> 
      Your email address <br /> 
      <input name="email" type="text" id="email" size="35" /> 
      <br /> 
      <br /> 
Choose a file to upload<br /> 

  <!--APC hidden field--> 
<input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="<?php echo $up_id; ?>"/> 
  <!----> 

<input name="file" type="file" id="file" size="30"/> 

  <!--Include the iframe--> 
<br /> 
<iframe id="upload_frame" name="upload_frame" frameborder="0" border="0" src="" scrolling="no" scrollbar="no" > </iframe> 
<br /> 
  <!----> 

      <input name="Submit" type="submit" id="submit" value="Submit" /> 
    </form> 
    </div> 

  </body> 

  </html>

在upload_frams.php

中

 <?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>

在style_progress.css

中

/*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;
}

View Demo

谢谢， Chintu

如何实现jquery php进度条

5 个答案: