Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > PHP: Extensions > PHP + javascript прогресс бар

Автор: Cript777 17.6.2013, 00:30

Приветствую! Имеется простая форма загрузки:

Код


<form method="post" enctype="multipart/form-data" action="http://----.com/upload.php?">
    <p><input name="file" size="18" type="file" value=""></p>
    <p><input name="submit"  type="submit" value="загрузить" onclick=''></p>
</form>

<progress id="progress" max="100" style="width:300px;" value="0"></progress>  \\\прогресс-бар

простой php обработчик:

Код


$file = $_FILES['file']['tmp_name'];
$filename = $_FILES['file']['name'];
if(!empty($file))
{
  ini_set('memory_limit', '32M'); 
  $maxsize = "260000000";
  $extentions = array( "gif","txt","tpl","html","htm","css","pdf","ini","torrent");
  $size = filesize ($_FILES['file']['tmp_name']); 
  $type = strtolower(substr($filename, 1+strrpos($filename,".")));
  $new_name = $_FILES['file']['name'];
  if($size > $maxsize)
  { 
     echo "Error1<br><a href='' onClick=window.close();>Закрыть окно</a>";
  } 
  elseif(!in_array($type,$extentions)) 
  { 
    echo ' <b>Error2 <br>';
  } 
  else 
  { 
    if (copy($file, "$ftpuser/".$new_name))
      echo "Файл успешно загружен!<br>";
    else echo "Файл НЕ был загружен.";
  } 
}

Нужно сделать так, чтобы перемещение ползунка прогресс бара шло параллельно загрузке файла.. smile

Автор: Fortop 17.6.2013, 09:39

http://www.php.net/manual/en/session.configuration.php#ini.session.upload-progress.enabled

Автор: Cript777 17.6.2013, 17:05

Цитата(Fortop @ 17.6.2013, 09:39)

http://www.php.net/manual/en/session.configuration.php#ini.session.upload-progress.enabled

Спасибо за совет, но это что-то совсем не то, да и не выходит то что нужно..
Мне скорей всего нужна javascript функция..

Автор: Vas 17.6.2013, 20:20

http://ru.vingrad.com/%D0%9A%D0%B0%D1%81%D1%82%D0%BE%D0%BC%D0%BD%D0%B0%D1%8F-%D1%81%D1%82%D0%B8%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F-%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B8-%D1%84%D0%B0%D0%B9%D0%BB%D0%BE%D0%B2-%D1%87%D0%B5%D1%80%D0%B5%D0%B7-Ajax-id51a1b30c6ccc19a95b000463

Автор: Cript777 17.6.2013, 22:02

Цитата(Vas @ 17.6.2013, 20:20)

не совсем, нужна функция которая показывает сколько загрузилось файла

Автор: Arantir 17.6.2013, 22:15

Цитата(Cript777 @ 17.6.2013, 16:05

)

Про это ведь так красиво написано http://www.php.net/manual/ru/session.upload-progress.php:

Цитата

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

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

Добавлено @ 22:20
Поддержка прогресса загрузки чистым Javascript появилась вместе с HTML5. Можете разобраться, если хотите. Мне еще не приходилось именно с этим иметь дела, так что много не подскажу. Вот, например, статья http://habrahabr.ru/post/112286/

В целом, как всегда, новые технологии что-то делают удобнее, эффективнее, продуктивнее, но при этом требуют долгого курения мануалов и документаций, от чего в тяжелых случаях может развиться острое обструктивное нетерпение и хронический пофигизм smile

Автор: Cript777 18.6.2013, 03:28

В общем решил воспользоваться этим: http://digitarald.de/project/fancyupload/3-0/showcase/photoqueue/ , хотя в IE почти не работает..

Автор: Vas 18.6.2013, 07:09

Цитата(Cript777 @ 17.6.2013, 22:02

)

не совсем, нужна функция которая показывает сколько загрузилось файла

Дык она там вроде как есть

Код


 // функция для анимации процесса загрузи
    uploadProgress = function(id, fileName, loaded, total){
        var right = _this.find('.right1[process="'+id+'"]'), // найдем созданый контейнер
            procent = Math.round(loaded / total * 100);         // рассчитываем процент загрузки
            right.find('.bar').css('width',procent+'%');

Автор: Sanchezzz 18.6.2013, 14:22

Это работает только если мы используем HTML5.. IE < 9 в пролете + старые версии Оперы туда же.
В 3.0.1 правки какие-то были на улучшения, я ее уже позже нашел у себя на hdd, и уже маленько жилею, что не использовал в статье.

Этот ответ добавлен с нового Винграда - http://ru.vingrad.com//object-id51be2f156ccc190860000002#findElement_E7045_51c042f26ccc196b3a001195_0

Автор: Vas 19.6.2013, 07:01

Цитата(Sanchezzz @ 18.6.2013, 14:22

)

и уже маленько жилею, что не использовал в статье.

Дык может исправишь данное упущение ;)