прогресс бар php ajax
Php+Ajax полоса загрузки ProgressBar
Здравствуй уважаемый читатель блога LifeExample, ты знаешь, что такое ProgressBar? ProgressBar — это индикатор, который показывает скорость и процент выполнения любого процесса. ProgressBar также называют полосой загрузки, или индикатором загрузки. Обычно прогресс бар используют для отображения процесса скачивания или закачивания файлов, но существуют и другие способы применения. Почему то в интернете все ссылки связанные использованием ProgressBar на php, сводятся к загрузке файлов, неужели людям не нужно отслеживать процесс выполнения других задач? Например, таких как процент считывания XML файла, или процесс заполнения SQL таблицы данными. Немало важным индикатор отслеживания является и при работе с удаленным сервером.
Недавно мне пришлось разработать грабер для одной фирмы. Грабер должен был: получить с сайта конкурентов, каталог продукции, сохранив структуру вложенности разделов. Так вот при частом обращении с чужому серверу, с целью получения кода страницы, для дальнейшего парсинга, уходит много времени, что влечет за собой появление ошибки выполнения сценария:
Fatal error: Maximum execution time of 30 seconds exceeded in …
Для того чтобы избежать данной оказии, нужно разбить наш процесс на части, таким образом чтобы каждая из частей при выполнении укладывалась в 30 секундный интервал. В этот момент как раз таки и неплохо знать, сколько же процентов выполнилось, и сколько еще осталось ждать.
Пишем PHP скрипт для полосы загрузки с использованием AJAX
Представим, что у нас есть объемный алгоритм, который обрабатывает информацию по частям, и назовем его условно «сложной задачей». Чтобы было понятно, представьте что информацией является разбитый на части файл, который нужно скачать с сервера.
Создавать ProgressBar мы будем последовательно, выполнив для этого 3 шага.
AJAX обработчик (Шаг 1)
И так, скачайте данный скрипт, и положите его в корневую папку вашего сайта, либо в ручную создайте пустой файл ajax.js и вставьте в него приведенный выше код.
Пишем скрипт PHP выполняющий «сложную задачу» (Шаг 2)
Эта часть кода описывает процесс выполнения «сложной задачи», если интерпретировать ее на задачу скачивания файла, то переменная $part должна содержать количество частей разбитого файла. Счетчик уже скачанных частей должен храниться в сессии на сервере, поэтому сразу открываем ее для записи функцией session_start(), для того чтобы в дальнейшем увеличивать $_SESSION[‘sucsess_part’] на один, каждый раз при успешной закачке одной из частей файла. Функция floor() округляет выполненные проценты скачивания до целого числа в меньшую сторону.
Вот и весь скрипт расчета сложной задачи, конечно на практике данный скрипт разрастётся сотнями строк, но для общего примера хватит и данного кода. В принципе правильнее было бы выделить этот скрипт отдельно и обращаться к нему с html странички с помощью ajax.js, но т.к. он слишком мал, то будет понятнее включить обработчик «сложной задачи» непосредственно в код страницы.
Организация процесса обновления полосы загрузки и вывод её на страницу (3 шаг)
Код вывода HTML страницы и progressbar будет заключен между скобками else из предыдущего шага:
Скопируйте следующий кусок кода и вставьте его вместо многоточия.
Данный код выводит на страницу кнопку с названием ‘Выполнить сложную задачу’, при нажатии на которую запускается процесс обработки сложной задачи с использованием ajax запросов. В коде присутствуют комментарии, поэтому не стану их дублировать, просто советую внимательно посмотреть что там написанно.
Если вы все сделали правильно, то у вас в корне сайта должны лежать два файла: index.php и ajax.js, в противном случаем вы можете скачать их одним архивом.
Запустите index.php вы увидите кнопку ‘Выполнить сложную задачу’. Нажмите на нее, и синяя полоса загрузки начнет заполняться зеленым цветом.
При достижении 100% вы увидите сообщение о успешном выполнении «сложной задачи».
Помните о том, что счетчик выполнения хранится в сессии на стороне сервера, поэтому для того, чтобы вновь посмотреть работу скрипта вам нужно будет перезапустить браузер, либо дописать скрипт самостоятельно таким образом, чтобы сессия сбрасывалась при достижении 100% результата.
Сегодня в статье с ужасным названием php+ajax полоса загрузки progressbar
мы рассмотрели, очень полезный на мой взгляд, механизм отслеживания выполнения задачи в процентах с выводом графического индикатора. Полоса загрузки, или попросту progressbar, будет полезен при синхронизации данных, при скачивании или закачивании файлов, а также при удаленной работе с чужим сайтом.
Прогресс выполнения тяжелой задачи в PHP
Случилось мне как-то иметь дело с тяжелым PHP-скриптом. Нужно было каким-то образом в браузере отображать прогресс выполнения задачи в то время, пока в достаточно длительном цикле на стороне PHP проводились расчёты. В таких случаях обычно прибегают к периодичному выводу строки вроде этой:
Этот вариант меня не устраивал по нескольким причинам, к тому же мне в принципе не нравится такой подход.
Итераций у меня было порядка 3000—5000. Я прикинул, что великоват трафик для такой несложной затеи. Кроме того, мне такой вариант казался очень некрасивым с технической точки зрения, а внешний вид страницы и вовсе получался уродлив: футер дойдет еще не скоро — после последнего уведомления о 100% выполнении задачи.
Увернуться от проблемы некрасивой страницы большого труда не составляло, но остальные минусы заставили меня обрадоваться и приступить к поискам более изящного решения.
Решение простое. Основанная страница — это пульт управления. С пульта можно запустить и остановить задачу. Эта страница инициирует XMLHttpRequest — стартует выполнение основной задачи. В процессе выполнения этой задачи (внутри основного цикла) скрипт отправляет клиенту один байт — символ пробела. На пульте в обработчике onreadystatechange мы, получая байт за байтом, сможем делать вывод о прогрессе выполнения задачи.
Схема такая. Скрипт операции:
Однако, итераций всего 50. Об этом мы знаем, потому что сами определили их количество в файле скрипта. А если не знаем или количество может меняться? При readyState == 2 мы можем получить информацию из заголовков. Давайте этим и воспользуемся для определения количества итераций:
А на пульте получим и запомним это значение:
Общая схема должна быть ясна. Поговорим теперь о подводных камнях.
Кроме того, то ли Nginx, то ли FastCGI, то ли сам Chrome считают, что инициировать прием-передачу тела ответа, которое содержит всего-навсего один байт — слишком расточительно. Поэтому нужно предварить всю операцию дополнительными байтами. Нужно договориться, скажем, что первые 20 пробелов вообще ничего не должны означать. На стороне PHP их нужно просто «выплюнуть» в вывод, а в обработчике onreadystatechange их нужно проигнорировать. На мой взгляд — раз уж вся конфигурационная составляющая передается в заголовках — то и это число игнорируемых пробелов тоже лучше передать в заголовке. Назовем это padding-ом.
На стороне клиента это тоже нужно учесть:
Откуда число 20? Если подскажете — буду весьма признателен. Я его установил экспериментальным путем.
С ее помощью можно обойти все уровни буферизации, вывести данные напрямую, после чего все буферы восстанавливаются.
Кстати, а почему именно пробел используется для уведомления о выполненной части задачи? Просто потому что почти любой формат представления данных в вебе такими пробелами не испортишь. Можно применить такой метод передачи уведомления о прогрессе операции, а после всего этого вывести отчет о результатах в JSON.
Если все привести в порядок, немного оптимизировать и дополнить код всеми возможностями, которые могут пригодиться, получится вот что:
возможен ли прогресс-бар с php и javascript с использованием ajax
Мне было интересно, как сделать индикатор прогресса таким, как gmail.
как часть моего php. Но, похоже,я вызываю функцию ajax на непрерывном интервале.
5 ответов
Я сделал индикатор прогресса с PHP, CSS и HTML. Ну, это работает правильно, но, например, у пользователя есть выносливость 6/6. Бар будет 6% из 100%. как бы я это изменил? Вот кодировка ниже..
Я разрабатываю игру на основе Html5, JavaScript (jQuery) и ajax с использованием PHP в качестве серверной стороны. Теперь в игре есть различные типы заданий, которые вы можете назначить своим игрокам в зависимости от продолжительности задания. Предположим, я назначил одно задание JOB1 одному.
Я не уверен, что именно Gmail делает для панели прогресса, но вы можете добиться чего-то подобного в PHP, хотя это может быть немного сложно.
Во-первых, чтобы объяснить, почему ваши примеры не работают:
Если вы используете сеанс, как в другом примере, проблема становится хранилищем сеансов. Хранилище, как правило, блокируется во время выполнения скрипта, и оно не будет обновляться, чтобы обеспечить необходимый тип проверки хода выполнения.
Что вы могли бы сделать, так это записать прогресс в файл (или в базу данных) вручную. Например:
Затем попросите другой скрипт прочитать файл и вывести его содержимое.
Это должно сработать, потому что file_put_contents открывает, записывает и закрывает файл.
Использование какого-либо другого языка, кроме PHP, облегчило бы это. Многопоточность, возможно, облегчит это, но не является обязательным требованием. Однако наличие постоянно работающего процесса упростило бы его (PHP запускает процесс только на время вашего запроса, а затем завершает работу)
запустите свой код jquery с интервалом и используйте PHP, чтобы напечатать процент выполнения и затем нарисовать полосу.
так что это будет что-то вроде
EDIT 2
Я думаю, что Gmail показывает прогресс, когда он загружает все ресурсы, например файлы JS. Существуют различные способы сделать это: вы можете динамически включать все ресурсы с JS или заставить все включенные файлы JS сообщать о том, что они были загружены.
Чтобы сделать частичный вывод PHP, используйте это:
ob.php
.htaccess
эта тема и эта ссылка помогли мне найти решение той же проблемы, поэтому я предоставляю ее для записи:
. таким образом, test.php может быть любым JOB, который делает что-то. и при этом ECHOes 100 символов (байт) с мигающим буфером.
Есть прогресс-бар и работает нормально,но у меня есть проблема со стилизацией. Как вы можете видеть на изображении, я хочу, чтобы правая сторона прогрессировала так же, как и на изображении. Я не настолько хорош на css. Если бы нашелся герой, который объяснил бы мне, как я мог бы это сделать, я.
По моему мнению, вы можете разделить процесс входа в систему на несколько частей и проверок.
Каждая выполненная проверка деталей отправляет ответ на ваш индикатор выполнения, и ширина индикатора выполнения увеличит такие шаблоны. После этого индикатор выполнения отправит следующий запрос на ваш процесс входа в систему для шага, пока вы не дойдете до 100% входа и перенаправления.
Похожие вопросы:
Как получить прогресс загрузки файла в JQuery таким образом, чтобы я мог обновить строку состояния о загрузке файла. Ниже приведен мой код загрузки файла с использованием Ajax в JQuery.
Я уверен, что об этом уже спрашивали раньше, но так как я не могу найти хорошего ответа, то вот я и спрашиваю. опять. 🙂 Есть ли способ, используя только смесь HTML, JavaScript/AJAX, и PHP.
Прогресс-бар с PHP и AJAX с
Я работаю над индикатором выполнения, который обновляет прогресс, используя ajax-запросы и переменные сеанса. Когда моя программа выполняет трудоемкую операцию, такую как отправка многих писем и т. д. он просто устанавливает правильную переменную сеанса (которая содержит значение прогресса). Эта операция запускается функцией post () в коде ниже.
тем временем, вторая функция ask() выполняется в цикле каждые 500 мс. Он должен вернуть текущий прогресс в реальном времени. И вот в чем проблема: каждый запрос, отправленный ask (), ждет запроса, отправленного post () функция завершена. Самое смешное, что если я установлю какой-то URL, как google.com вместо url / to / progress он работает просто отлично, за исключением того, что это не то, что я хочу :). Это означает, что проблема на стороне сервера.
не уверен, что это важно, но я использую Yii Framework.
весь код ниже-это только царапина (но работает), и его единственная цель-показать, что я имел в виду.
извините за мой плохой английский 🙂
посмотреть в составе:
2 ответов
я думаю, что ваша проблема здесь связана с сессией.
в качестве примечания-пожалуйста, не передавайте строки в setInterval() функции-пасс. Таким образом, ваша строка должна на самом деле читать:
но-было бы лучше использовать setTimeout() на success / error обработки ask() функция ajax. Это потому, что с помощью setInterval() новый запрос будет быть возбуждено независимо от состояния предыдущего. Было бы более эффективно дождаться завершения предыдущего запроса, прежде чем инициировать следующий. Поэтому я бы сделал что-то еще вроде этого:
. хотя это все еще не устраняет проблему сеанса.
@DaveRandom выше правильно указывает, что вы являетесь жертвой блокировки хранения сеанса.
мелким шрифтом здесь является то, что после вызова session_write_close у вас не будет доступа к переменным сеанса, поэтому вам нужно структурировать сценарий для post таким образом:
кроме того, вы можете переключать блокировку сеанса несколько раз в течение жизни скрипта:
этот механизм делает это так, что пока скрипт спит, другие скрипты могут получить доступ к данным сеанса без проблем.
File Upload with Progress Bar using jQuery Ajax and PHP
The file upload feature is the most used functionality for the dynamic web application. The file upload functionality can be easily implemented using PHP. Generally, the page is refreshed when you upload file using PHP. To make this file upload user-friendly, jQuery and Ajax can be used to upload files/images without page refresh.
While the file is uploading to the server, the web page stays on the loading state. It’s very difficult for the user to track the upload progress. Progress Bar is very useful to overcome this issue by showing the upload progress in a human-readable format. A progress bar is a graphical element that visualizes the progression of an operation. Generally, a progress bar is used to show progress representation in percentage format for upload, download, or installation. In this tutorial, we will show you how to upload file in PHP and make a progress bar using jQuery and Ajax.
In the example ajax progress bar with percentage script, we will implement the following functionality.
Before getting started to integrate file upload with progress bar, take a look at the file structure.
File Upload Form with Progress Bar
The index.html file handles the file selection and live upload progress display operations.
File Upload Form:
1. Create an HTML form with a file input field and a submit button.
2. Define an HTML element to display the progress bar.
3. Define an HTML element to display the file upload status.
Ajax File Upload with Progress Bar:
The jQuery and Ajax is used to upload file with a progress bar, so include the jQuery library first.
The following jQuery code sends the selected file data to the server-side script without reloading the page via Ajax.
Upload File to Server using PHP
The upload.php file is called by the Ajax request to handles the file upload process with PHP.
Conclusion
The progress bar provides and user-friendly way of showing the upload completion status in real-time. You can add the jQuery progress bar to file upload and display percentage progress bar while the file is uploading to the server. The progress bar can be added to any type of file upload (image, pdf, doc, docx, audio, video, etc) in PHP. Our example code helps you to easily make the progress bar with percentage for upload, download, and installation operations.
Are you want to get implementation help, or modify or enhance the functionality of this script? Submit Paid Service Request