Эмуляция прогресс-бара

pstatus · 5 Янв 2009

Для просмотра ссылки Войди или Зарегистрируйся

Brevis · 6 Янв 2009

Можно еще реализовать данную функциональность через фреймы:

Файл, вызывающий скрипт выполнения запросов

HTML:

<html>
<body>
Please wait...
<br />
<iframe id="progress" src="sql.php?step=1" width="300" height="75"></iframe>
</body>
</html>

Скрипт, выполняющий запросы sql.php:

PHP:

<?php
if (intval($_GET['step'])>10) die('Finish!');
//выполняем запросы, в зависимотси от $_GET['step']
?>

<div><?php echo intval($_GET['step'])*10; ?>%</div>
<div style="background-color: red; height: 20px; width: <?php echo intval($_GET['step'])*20+10; ?>px;">&nbsp;</div>
<script type="text/javascript">
function step(s)
{
document.location.href='sql.php?step='+s;
}
setTimeout('step(<?php echo intval($_GET['step'])+1; ?>);', 500);
</script>

Смысл: в sql.php передается параметр step, сначала равный "1". Как только скрипт выполнит запрос, связанный с параметром "1", вызывается скрипт с параметром "2", итд. пока не вызовется скрипт с параметром "11", на этом работа заканчивается.

В примере создается искусственная задержка, равная 0,5 секунды.

Код:

setTimeout('step(<?php echo intval($_GET['step'])+1; ?>);', 500);

В реальных условиях, при жирных запросах задержка скорее всего не понадобится

Этот пример живьем: Для просмотра ссылки Войди или Зарегистрируйся

umaxim · 16 Янв 2009

Вопрос а вот как к примеру вычеслить на сколько процентов залит фаил и сделать процесс бар.

BDS · 18 Янв 2009

а мне вот тут мысль ришла..
приложение во время работы пишет процент выполнения в текстовый файл (периодически его перезаписывает), а js на той же странице, просто читает его с определенной периодичностью.. файл, естественно, имеет уникальное имя..
думаю прокатит..

tmcdos · 25 Апр 2009

Прогресс-бар для аплоад

umaxim написал(а):
Вопрос а вот как к примеру вычеслить на сколько процентов залит фаил и сделать процесс бар.

Я использую модуль Для просмотра ссылки Войди или Зарегистрируйся - есть еще на PECL (Для просмотра ссылки Войди или Зарегистрируйся)

Вот моя форма для отправки файлов:

HTML:

<FORM METHOD="POST" name="upform" ENCTYPE="multipart/form-data" action="{ACTION}" onSubmit="clearInfo(); with(document.upform) { upon.disabled = true; stoper.disabled = false; } setTimeout('doAJAXSubmit()', 1000); return true;" target="target_upload">
<input type="hidden" name="MAX_FILE_SIZE" value="100000000">
<input type="hidden" name="UPLOAD_IDENTIFIER" value="{UP_ID}">
<table cellspacing="1" cellpadding="1" align="center" style="font-family: Tahoma; font-size: 9pt">
  <tr>
    <td><input id="upload" name="upload" size="40" type="file" class="edit"></td>
    <td>&nbsp;&nbsp;
      <input type="submit" name="upon" class="button2" value="Upload File">&nbsp;&nbsp;
      <input type="button" name="stoper" class="button2" value="STOP" onClick="javascript: this.disabled = true; stopLoad(window.target_upload);" disabled></td>
    </td>
  </tr>
  <tr>
    <td>
      <div style="border: 1px solid black; height: 16px; width: 200px; background-color: white">
        <div id="procent" name="procent" style="background-color: #9EC1EF; height:16px; width: 0px"></div>
      </div>
    </td>
    <td rowspan="2" align="center"><iframe id='target_upload' name='target_upload' src='' style="width:400px; height:100px;" frameborder="1" scrolling="auto"></iframe></td>
  </tr>
  <tr>
    <td id="info" name="info" align="center">&nbsp;</td>
  </tr>
</table>
</FORM>
<script language="Javascript" type="text/javascript">
var req;

function  printProps(obj, objName) 
{
  var output = typeof(obj)+"\n" ;
  if(obj) for (var prop in obj) 
  {
    if(obj[prop]) output += objName + "." + prop + " = " + obj[prop] + "\n" ;
  }
  //if(typeof(output) != "object") output = obj;
  return output ;
}

function getElById(idVal) 
{
  if (document.layers) return document.layers[idVal];
  if (document.all != null) return document.all[idVal];
  if (document.getElementById != null) return document.getElementById(idVal);
  
  alert("Problem getting element by id");
  return null;
}

function clearInfo()
{
  var id_proc = getElById('procent');
  id_proc.style.width = '0px';
  var id_info = getElById('info');
  id_info.innerHTML = '';
}

function doAJAXSubmit()
{
  if(req && req.readyState) return;
  var idField = getElById('UPLOAD_IDENTIFIER');
  if(!idField) alert('UPLOAD_IDENTIFIER is not found');
  var url = '/CRM/progress.php?UPLOAD_IDENTIFIER=' + escape(idField.value);
  req = null;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
// JScript gives us Conditional compilation, we can cope with old IE versions.
// and security blocked creation of the objects.
  try 
  {
    req = new ActiveXObject("Msxml2.XMLHTTP");
  } 
  catch (e) 
  {
    try 
    {
      req = new ActiveXObject("Microsoft.XMLHTTP");
    } 
    catch (E) 
    {
      req = false;
    }
  }
@end @*/
  if (!req && typeof XMLHttpRequest!='undefined') 
  {
    try 
    {
      req = new XMLHttpRequest();
    } 
    catch (e) 
    {
      req = null;
    }
  }
  if (!req && window.createRequest) 
  {
    try 
    {
      req = window.createRequest();
    } 
    catch (e) 
    {
      req = null;
    }
  }
  if(req)
  {
    req.open('GET', url, true);
    req.onreadystatechange = Prog_callback;
    req.send(null);
    //req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    //req.send("id=" + escape(idTextField.value));
  }
}

function Prog_callback() 
{
// 0 = uninitialized
// 1 = loading
// 2 = loaded
// 3 = interactive
// 4 = complete
// responseText, responseXML, status, statusText

  if (req.readyState == 4) 
  {
    if (req.status == 200) 
    {
      var node = req.responseXML.getElementsByTagName('upload')[0];
      if(node)
      {
        var status = node.getAttribute('status');
        if(status == 'OK')
        {
          var vreme  = node.getAttribute('vreme');
          var speed  = node.getAttribute('speed');
          var sent   = node.getAttribute('sent');
          var total  = node.getAttribute('total');
          var proc   = node.getAttribute('proc');
  
          var id_proc = getElById('procent');
          id_proc.style.width = parseInt(proc,10)*2 + 'px';
          var id_info = getElById('info');
          id_info.innerHTML =  sent + ' / '+ total + ' (' + proc + ' %)<br>' + vreme + ' left at ' + speed + ' KB/s';
          setTimeout('doAJAXSubmit()', 1000);
        }
        else //if(status == 'FIN')
        {
          clearInfo();
          document.upform.upon.disabled = false;
          document.upform.stoper.disabled = true;
        }
        //else if(status == 'ERR') setTimeout('doAJAXSubmit()', 1000);
      }
      else // PHP parse error
      {
        clearInfo();
        document.upform.upon.disabled = false;
        document.upform.stoper.disabled = true;
      }
    }
  }
}

function stopLoad(id)
{
  if(!document.all) id.stop();
    else id.document.execCommand('stop');
  if(req) req.abort();
  clearInfo();
  document.upform.upon.disabled = false;
  document.upform.stoper.disabled = true;
}
</script>

{UP_ID} надо менять из PHP - я делаю str_replace('{UP_ID}',rand().'.'.time(),$template)
{ACTION} - ето будет PHP скрипт, который получает файл
url в doAJAXSubmit() надо поменять на PHP скрипт, который будет возвращать XML с текущем прогрессе - у меня примерно такой:

PHP:

<?
  header('Content-Type: text/xml');
  header('Cache-Control: no-cache');
  echo '<?xml version="1.0" encoding="windows-1251" ?>';

function nice_value($x) 
{
  if ($x < 100)  $x;
  if ($x < 10000)  return sprintf("%.2fKB", $x/1000);
  if ($x < 900000) return sprintf("%dKB", $x/1000);
  return sprintf("%.2fMB", $x/1000/1000);
}

//	$X = upload_progress_meter_get_info($_GET["UPLOAD_IDENTIFIER"]);
  $X = uploadprogress_get_info($_GET["UPLOAD_IDENTIFIER"]);
  if (!is_array($X)) 
  {
    echo '<upload status="ERR" />';
  }
  else
  {
    $meter = sprintf("%.2f", $X['bytes_uploaded'] / $X['bytes_total'] * 100);
		
    $sp = $X['speed_last'];
    if ($sp < 10000) $speed  = sprintf("%.2f", $sp / 1000);
      else $speed  = sprintf("%d", $sp / 1000);
		
    $eta = sprintf("%02d:%02d", $X['est_sec'] / 60, $X['est_sec'] % 60 );
		
    $upl   = nice_value($X['bytes_uploaded']);
    $total = nice_value($X['bytes_total']);
		
    if ($X['bytes_total'] > 1 && $X['bytes_uploaded'] >= $X['bytes_total'] && $X['est_sec'] == 0) 
    {
      echo '<upload status="FIN" />';
    }
    else
    {
      // vreme - estimated time
      // speed - how fast is upload
      // sent - how much data was sent
      // total - total length of uploaded data
      // meter - uploaded in percentage
      echo '<upload status="OK" vreme="'.$eta.'" speed="'.$speed.'" sent="'.$upl.'" total="'.$total.'" proc="'.$meter.'" />';
    }
  }
?>

x00xer · 27 Апр 2009

xIcemanx написал(а):
Буду благодарен за любую помощь :bc:

Можно повесить какой нить спиннер и не париться, все ж как никак а юзеру приятно

victor89 · 29 Сен 2009

Народ подскажите как показать пользователю процент выполнения скрипта. Да в самом скрипте я могу в некоторых момента отправить на вывод что завершился этап №, но браузер ждет пока сервер не вернет весь результат.
Никак немогу разобратся с ob_implicit_flush();
Если есть пример.
Спасибо

Добавлено через 11 минут
Покопавшись в интернете пример отправки пользователю инфы в процесе работы скрипта не дожидаючись конца работы:

ob_flush();
echo "Hello<br>";
flush();
sleep(5);
echo "World";

Сначала на экран показывается Хелло а через 5 сек ворд.
Суть сначала включаем режим вывода: ob_flush();
После нужного ечо запрашиваем немедленную отправку данных: flush();

Эмуляция прогресс-бара

pstatus

Создатель

Brevis

Создатель

umaxim

Создатель

BDS

Читатель

tmcdos

Создатель

x00xer

Создатель

victor89

Постоялец