как реализовать JQuery PHP прогресс-бар - PullRequest
1 голос
/ 29 марта 2010

У меня есть многошаговая форма, где форма на Step3 отправляется в Step4.php. Step4 - это страница результатов, и для ее загрузки требуется некоторое время, поэтому я хотел попытаться реализовать индикатор выполнения, или строку загрузки, или что-то еще, когда пользователь нажимает кнопку отправки step3 до фактической загрузки Step4.php. Я думаю, что я мог бы сделать это с помощью jquery? Но я не уверен как. Можно ли сделать это без необходимости использовать jquery для отправки данных в step4.php?

Ответы [ 5 ]

1 голос
/ 29 марта 2010

Очень сложно делать индикаторы выполнения для запросов ajax. На самом деле у вас нет доступа к запросу, чтобы предоставить пользователю точную информацию с помощью индикатора выполнения. Вам лучше дать своим пользователям блесну, показывающую, что скрипт работает над загрузкой.

0 голосов
/ 25 апреля 2012

Простой индикатор загрузки 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> 

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

In 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;
}

Просмотреть демонстрацию

Спасибо, Chintu

0 голосов
/ 29 марта 2010

Я решил это в загрузочной программе MySQL, выведя простую страницу с индикатором выполнения, очистив вывод командой flush (). Затем я вывожу простой фрагмент JavaScript:

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

Я также вызываю flush после вывода этого фрагмента JS. Вы должны постоянно выводить эти фрагменты каждый раз, когда хотите обновить индикатор выполнения.

0 голосов
/ 29 марта 2010

Если это индикатор загрузки:

Первая часть - это установка чего-то на стороне 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. Прошло немного времени с тех пор, как я сделал AJAX с PHP, но что-то вроде этого должно сделать:

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

Редактировать: Ой, в оригинальном сообщении нет ничего, что говорит, что это индикатор загрузки

0 голосов
/ 29 марта 2010

Как говорит Питер, это очень сложно сделать из ajax. Часто вместо этого люди используют крошечный апплет Flash, который обеспечивает загрузку файлов и индикаторы выполнения. Я знаю, что это делают и Gmail, и Wordpress, и многие другие. Есть много готовых, которые вы просто должны зайти и использовать:

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...