Скрипт прогресс бара загрузки файлов PHP + jQuery


XMLHttpRequest: индикация прогресса

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/xmlhttprequest.

Запрос XMLHttpRequest состоит из двух фаз:

  1. Стадия отправки (upload). На ней данные загружаются на сервер. Эта фаза может быть долгой для POST-запросов. Для отслеживания прогресса на стадии отправки существует объект типа XMLHttpRequestUpload, доступный как xhr.upload и события на нём.
  2. Стадия скачивания (download). После того, как данные загружены, браузер скачивает ответ с сервера. Если он большой, то это может занять существенное время. На этой стадии используется обработчик xhr.onprogress .

Далее – обо всём по порядку.

Стадия отправки

На стадии отправки для получения информации используем объект xhr.upload . У этого объекта нет методов, он только генерирует события в процессе отправки. А они-то как раз и нужны.

Вот полный список событий:

Пример установки обработчиков на стадию отправки:

Стадия скачивания

После того, как загрузка завершена, и сервер соизволит ответить на запрос, XMLHttpRequest начнёт скачивание ответа сервера.

На этой фазе xhr.upload уже не нужен, а в дело вступают обработчики событий на самом объекте xhr . В частности, событие xhr.onprogress содержит информацию о количестве принятых байт ответа.

Все события, возникающие в этих обработчиках, имеют тип ProgressEvent, то есть имеют свойства loaded – количество уже пересланных данных в байтах и total – общее количество данных.

Демо: загрузка файла с индикатором прогресса

Современный XMLHttpRequest позволяет отправить на сервер всё, что угодно. Текст, файл, форму.

Мы, для примера, рассмотрим загрузку файла с индикацией прогресса. Это требует от браузера поддержки File API, то есть исключает IE9-.

File API позволяет получить доступ к содержимому файла, который перенесён в браузер при помощи Drag’n’Drop или выбран в поле формы, и отправить его при помощи XMLHttpRequest .

Форма для выбора файла с обработчиком submit :


Мы получаем файл из формы через свойство files элемента и передаём его в функцию upload :

Этот код отправит файл на сервер и будет сообщать о прогрессе при его отправке ( xhr.upload.onprogress ), а также об окончании запроса ( xhr.onload , xhr.onerror ).

Полный пример индикации прогресса при загрузке, основанный на коде выше:

Событие onprogress в деталях

При обработке события onprogress есть ряд важных тонкостей.

Можно, конечно, их игнорировать, но лучше бы знать.

Заметим, что событие, возникающее при onprogress , имеет одинаковый вид на стадии отправки (в обработчике xhr.upload.onprogress ) и при получении ответа (в обработчике xhr.onprogress ).

Оно представляет собой объект типа ProgressEvent со свойствами:

Сколько байт уже переслано.

Имеется в виду только тело запроса, заголовки не учитываются.

Если true , то известно полное количество байт для пересылки, и оно хранится в свойстве total .

Общее количество байт для пересылки, если известно.

А может ли оно быть неизвестно?

  • При отправке на сервер браузер всегда знает полный размер пересылаемых данных, так что total всегда содержит конкретное количество байт, а значение lengthComputable всегда будет true .
  • При скачивании данных – обычно сервер в начале сообщает их общее количество в HTTP-заголовке Content-Length . Но он может и не делать этого, например если сам не знает, сколько данных будет или если генерирует их динамически. Тогда total будет равно 0 . А чтобы отличить нулевой размер данных от неизвестного – как раз служит lengthComputable , которое в данном случае равно false .

Ещё особенности, которые необходимо учитывать при использовании onprogress :

Событие происходит при каждом полученном/отправленном байте, но не чаще чем раз в 50 мс.

В процессе получения данных, ещё до их полной передачи, доступен xhr.responseText , но он не обязательно содержит корректную строку.

Можно до окончания запроса заглянуть в него и прочитать текущие полученные данные. Важно, что при пересылке строки в кодировке UTF-8 кириллические символы, как, впрочем, и многие другие, кодируются 2 байтами. Возможно, что в конце одного пакета данных окажется первая половинка символа, а в начале следующего – вторая. Поэтому полагаться на то, что до окончания запроса в responseText находится корректная строка нельзя. Она может быть обрезана посередине символа.

Исключение – заведомо однобайтные символы, например цифры или латиница.


Сработавшее событие xhr.upload.onprogress не гарантирует, что данные дошли.

Событие xhr.upload.onprogress срабатывает, когда данные отправлены браузером. Но оно не гарантирует, что сервер получил, обработал и записал данные на диск. Он говорит лишь о самом факте отправки.

Поэтому прогресс-индикатор, получаемый при его помощи, носит приблизительный и оптимистичный характер.

Файлы и формы

Выше мы использовали xhr.send(file) для передачи файла непосредственно в теле запроса.

При этом посылается только содержимое файла.

Если нужно дополнительно передать имя файла или что-то ещё – это можно удобно сделать через форму, при помощи объекта FormData:

Создадим форму formData и прибавим к ней поле с файлом file и именем «myfile» :

Данные будут отправлены в кодировке multipart/form-data . Серверный фреймворк увидит это как обычную форму с файлом, практически все серверные технологии имеют их встроенную поддержку. Индикация прогресса реализуется точно так же.

Прогресс-бар на PHP

Макс Петров июнь 2015

Бывают «долгоиграющие» скрипты PHP. Например, пересчет статистики форума, вообще любая функция, которая требует анализа всех содержащихся на форуме сообщений. При большом объеме вычислений PHP-скрипт будет работать минуты, десятки минут, нам же желательно иметь хоть какое-нибудь средство для контроля хода выполнения, чтобы видеть, что PHP-скрипт не завис и оценивать время, оставшееся до его завершения.

В Интернете предлагаются по этому поводу мудреные решения, как то: использовать сокеты, ajax, jquery. Но можно ведь сделать просто, а если можно сделать просто, то незачем и усложнять.

Нам поможет Javascript. Javascript выполняется браузером сразу по его загрузке. Иными словами, как только браузер получает закрывающий тег , браузер приступает к исполнению всего кода, заключенного в контейнере . Поэтому, чтобы заставить браузер отражать ход выполнения программы на сервере (PHP-программы), нам нужно всего лишь посылать с сервера браузеру — по кусочкам — иллюстрирующий этот ход выполнения Javascript.

Илон Маск рекомендует:  Что такое код printer_create_brush

Допустим, у нас на PHP большой цикл, в котором производятся некие вычисления:

Progress(. ) — это PHP-функция, которая будет посылает в браузер порции Javascript-а с информацией о ходе выполнения цикла. Сама функция выглядит так:

Как видим, функция progress отправляет в поток вывода (отправляет браузеру) вполне тривиальный Javascript, сутью которого является изменение пустого (без текста) HTML-контейнера

Параметр $step — это шаг в процентах выполнения между отсылками сервером браузеру фрагментов Javascript. Например, если $step = 1, сервер будет посылать данные только при изменении степени выполнения PHP-скрипта не менее, чем на 1 процент. При этом от сервера будет отправлено всего не более 102 Javascript-фрагмента (включая стартовый и завершающий). Можно сказать, параметр $step экономит трафик, чем он больше, тем меньше текста будет отправлено браузеру, а изменение длины

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

Ajax-загрузка файлов с индикатором


IT блог — Ajax-загрузка файлов с индикатором

В настоящее время довольно популярным решением для веб-сайтов является работа пользователя со страницей без ее перезагрузки. В основном это делается с помощью Ajax – технологии асинхронного взаимодействия с сервером, основанной на объекте XMLHttpRequest. Мы описывали работу с Ajax с помощью библиотеки jQuery в статьях jQuery и Ajax и Использование Ajax.

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

В качестве тестового проекта создайте пустое приложение ASP.NET MVC в Visual Studio. Мы будем использовать C# на бэкенде (как я уже говорил, основное внимание мы уделим написанию JavaScript, так что для серверной части вы можете использовать любой другой язык). Добавьте библиотеку jQuery с помощью диспетчера пакетов NuGet (View Other Windows Package manager Console):

Добавьте в папку Controllers класс контроллера HomeController.cs со следующим содержимым (напомню, контроллер Home используется по умолчанию в настройках маршрутизации проекта – файл /App_Start/RouteConfig.cs):

Щелкните правой кнопкой мыши по методу Index и выберите в контекстном меню команду Add View. Visual Studio создаст файл представления /Views/Home/index.cshtml, а также компоновку по умолчанию /Views/Shared/_Layout.cshtml. Давайте подключим библиотеку jQuery в файле компоновки:

Здесь мы также добавили сброс стилей CSS для браузера и подключили таблицу стилей /Content/Site.css. Добавьте также файл script.js в папку scripts. Давайте теперь добавим форму для загрузки файлов в проект. Для этого откройте представление Index.cshtml и используйте следующую разметку:

В элементе section находится форма со вставкой загружаемых файлов. Файлы можно поместить в этот контейнер путем перетаскивания (drag-and-drop), либо через диалоговое окно после щелчка по элементу section. Элемент progress будет содержать индикатор загрузки файлов, в элементе error будут отображаться ошибки, а контейнер images нужен для отображения сохраненных на сервере картинок.

Теперь нам нужно добавить CSS-стили для страницы. Для этого отредактируйте файл /Content/Site.css следующим образом:

На данный момент форма выглядит следующим образом:

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

При клике по элементу section должно открываться модальное окно с выбором файла.

При перетаскивании файлов из проводника в окно браузера, элемент section должен подсвечиваться как при наведении курсора мыши (для этого мы добавили CSS-класс «dd&raqio;). При отпускании файлов (как и при выборе файла из диалогового окна) должна происходить загрузка картинок на сервер.

При загрузке файлов необходимо добавить индикатор и отобразить процент выполнения загрузки.

В случае ошибки на сервере, необходимо отобразить ошибки и скрыть индикатор.

В случае успешной загрузки картинок на сервер, необходимо отобразить их в контейнере images.

Следующий скрипт (файл script.js) решает все вышеуказанные вопросы:

Для сохранения списка файлов и передачи его на сервер через Ajax используется объект FormData.

Обратите внимание, что за отслеживание процесса загрузки отвечает свойство xhrFields объекта, передаваемого методу $.ajax. В этом свойстве хранится объект с функцией обработки события onprogress. Этому событию передается объект со свойствами loaded – объем уже загруженных данных, и total – общий размер данных. Благодаря этим двум параметрам мы можем отображать процесс выполнения загрузки на индикаторе.

В методе $.ajax() мы ссылаемся на метод действия Upload контроллера HomeController, который еще не был добавлен. Давайте исправим это и отредактируем файл HomeController.cs:


Здесь мы получаем файлы из индексатора Files объекта HttpRequestBase, который доступен в контроллере ASP.NET через свойство Request. Далее мы выполняем две простые проверки – размер файла не должен превышать 2 Мб и тип файлов должен быть либо JPG либо PNG. В случае несоответствия файла проверкам в скрипт возвращается объект с ошибкой, которая отображается пользователю. Иначе файл сохраняется в папке uploads проекта, ему присваивается сгенерированное с помощью GUID случайное имя.

Перед тестированием данного примера не забудьте добавить в корень проекта папку uploads.

Дисплей прогресс бар во время загрузки файла на AWS S3 с помощью Php и Jquery

Я использую AWS S3 для хранения файлов моего веб — приложения , как видео и изображений, рамки применения был CodeIgniter .

Поток моей системы , чтобы загрузить файл, как это: AJAX> PHP> AWS

Я могу успешно загрузить файл в ведре с помощью Php SDK предоставленный AWS, но у меня была проблема при отображении индикатора выполнения.

Использование XHR слушателя событий , чтобы показать прогресс бар только отслеживать процесс загрузки локального сервера, не для статуса загрузки AWS S3. Этот бар будет даже прогресс 100% , но AWS S3 еще не завершены.

Так что мой вопрос заключается в том , чтобы отслеживать процент прогресса загрузки AWS S3 и отображать его в HTML — коде?

Я надеюсь, что может отображать состояние прогресса, как:

15% от 100% загруженном ( 0

Прелоадер / Progress Bar 100% на JS

  • CSS / CSS3
  • Flexbox CSS
  • JavaScript
    • JavaScript с нуля
    • JS и Jquery
  • Уроки по 1С-Битрикс
    • Контент менеджер
      • Авторизация на сайте
      • Элементы управления
      • Работа с информацией
      • Управление структурой
    • Сайт на 1С-Битрикс
      • Создание landing page
  • Видео новости

  • Модули расширений
  • Расширения и плагины
    • Bootstrap
Илон Маск рекомендует:  Алгоpитм изобpажения линий

ПОДПИСКА на УРОКИ

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

Мне понравился данный плагин из за его гибкости и простоты настроек. Попался он мене на GitHab , возможно вам он понравится, скачивайте и внедряйте его на свои проекты.

Создаем прогресс Бар

See the Pen rYqjBr by Denis (@Dwstroy) on CodePen.

Открываем редактор в котором будем работать в моем случае это PhpStorm , создаем index файл, в заголовке пропишем Progress Bar. Подключаем Jquery .

Делаем две директории под CSS и JS скрипты. Затем, копирую plugin.js в JS директорию. Тут же создаем файл script.js в котором будем описывать настройки прогресс Бара.

Переходим в директорию CSS создаем style.css в нем будем описывать стили.

Теперь эти все файлы подключаем к index.html . Стили подключаем в head , а скрипты в нижней части body .

После открывающего тега bod прописываем блок Див с классом .dws-progress-bar который будет выводить саму анимацию.

Затем переходим в script.js , через функцию $(document) получаем доступ к объектам страницы, пишем событие .ready которое выстрелит в момент готовности DOM , то есть когда полностью загрузится страница, сработает данная функция.

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

Оформляем Progress Bar стилями в CSS

В первую очередь придадим нашему элементу стили. Открываем style.css , и с позиционируем круговой прогресс по середине. Прописываем данную конструкцию, в которой мы обращаемся к классу, и позиционируем блок по середине.


Таким же образом центруем в этом блоке процент загрузки. Увеличим текст, заменим шрифт, сделаем его пожирнее, и изменим цвет.

Далее переходим в script и приступим к анимированию.

Изменим цвет, color: «#2af7eb » , сделаем обводку пожирнее и по шире, придадим ей анимацию, указываем percent: 0 , и вызываем круглый прогресс где задаем время и процент анимирование.

При помощи данного параметра counter_clockwise: true можем анимировать в обратном направлении. Поменяв на false мы его отключаем или при желании можно удалить.

С помощью данной строки starting_position: 50 , можем поменять начальную позицию анимации.

Таким же образом вы можете по экспериментировать с временем загрузки, ее процентом и другими параметрами, настраивая данную анимацию под свои задачи.

Делаем прелоадер на странице

Для примера, разместим страницу где перед ее загрузкой будем показывать данную анимашку, сделаем как простенький прелоадер.

Создавать с нуля ее не будем, у меня она подготовлена, для этого я открываю ее и копирую код в наши файлы.

Как видим прелоадер работает, но отображается он, на заднем плане, добавим для него z-index: 100;

Следующий момент, перед загрузкой страницы нам нужно ее скрыть пока полностью не прогрузятся все элементы, в этот момент показать прелоадер, а затем когда страница прогрузится его скроем.

Обернем наш Прогресс бар в блок div с ID preloader .

Затем в стилях пропишем, для того чтобы прелоадер находился всегда с верху и не прокручивался когда опускаешь страничку, зафиксируем его, и отцентруем. Сделаем фон черным, и добавим z-index: 100;

Для того чтобы прелойдер после загрузки исчез, допишем в скрипте следующий код. Устанавливаем обработчик событий, создаем переменную и присваиваем ей значение, когда полностью страница прогрузится, мы плавно скрываем данные элементы при помощи данной функции.

Получили довольно не плохую анимашку, которую можете использовать для своих проектов.

В принципе на этом все, кому понравилось, пищите комментария, с вами был Денис, скоро увидимся.

Прогресс загрузки файлов в PHP 5.4

Всем кому приходилось реализовать на PHP загрузку файлов на сервер с отображением «реального» прогресс бара знают, что задача не из простых. Для создания полноценного прогресс бара загрузки файлов приходилось использовать сторонние расширения, такие как APC или uploadprogress. С выходом PHP 5.4 ситуация в корне изменилась. В PHP был встроен механизм позволяющий контролировать процесс загрузки файлов. Данное решение было добавлено в механизм сессий. Теперь, когда на сервер загружаются файлы, информация о процессе загрузки сохраняется в текущей сессии. Данная информация может быть извлечена и использована для вывода прогресс бара загрузки и дополнительных данных, например, процент загрузки и/или примерное время до окончания процесса.

Параметры настройки

Для настройки данного функционала доступно несколько конфигурационных параметров:


  • session.upload_progress.enabled [=1] — Включает/выключает данный функционал
  • session.upload_progress.cleanup [=1] — Включает/выключает очистку данных из сессии после завершения загрузки
  • session.upload_progress.prefix [=upload_progress] — Префикс переменной в сессии
  • session.upload_progress.name [=PHP_SESSION_UPLOAD_PROGRESS] — Название элемента массива $POST в котором передается название переменной сессии, в которой будет сохранена информация о загружаемых файлах. Если в массиве $POST не будет задана переменная с указанным названием, то данная функциональность не будет доступна
  • session.upload_progress.freq [=1%] — Частота обновления данных в сессии, данные будут обновляться при получении каждых session.upload_progress.freq байт Если за значением следует ‘%’, то значение будет интерпретировано как процент от общего размера загружаемых данных
  • session.upload_progress.min_freq [=1.0] — Минимальная задержка в секундах между обновлениями данных

Информация о процессе загрузи

Прогресс загрузки будет доступен когда включен параметр session.upload_progress.enabled , когда массив $POST содержит элемент с названием session.upload_progress.name и значение данного элемента не пустое.

При выполнении данных условий в текущей сессии будет создана переменная, название которой будет сформировано из значения параметра session.upload_progress.prefix и значения элемента с названием session.upload_progress.name массива $POST:

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

При загрузке файлов с помощью этой формы в сессии будет сохранена информация:

Отмена загрузки

Процесс загрузки можно отметить в любой момент, для этого нужно установить значение TRUE элементу cancel_upload массива данных в сессии:

Это приведет к отмене загрузки файлов и при этом рекурсивно, элементу error , в массивах данных о файлах, будет установлено значение UPLOAD_ERR_EXTENSION

Рабочий пример

Посмотрим как это работает на простом примере, реализовав простую загрузку файлов на сервер. Файлы будут отправляться на сервер через AJAX с помощью плагина form для jQuery. Данные о процессе загрузки будем запрашивать дополнительными запросами к серверу через AJAX, каждые пол секунды. На основе полученных данных будет заполнять прогресс бар

File Upload Progress Bar with Jquery and PHP.

To run this script you have to install PHP apc library extension or for PHP 5.4 not required, just follow the steps to enable the extension. For web page design we implemented with bootstrap CSS library for any information check my previous post Bootstrap Tutorial

Илон Маск рекомендует:  Что такое код swfmovie >streammp3

Windows APC Installation
Follow this link Click Here
In php.ini include apc.rfc1867 = on

Linuk APC Installation
Follow this Link Click Here
In php.ini include apc.rfc1867 = on
php.ini located in /etc/php.ini

get_progress.php
Contains PHP code it identifies file upload status from server process.


$uiq = uniqid ();
$image_folder = » uploads/ «;
$uploaded = false ;

if( isset ( $_POST [‘ upload_image ‘])) <
if( $_FILES [‘ userImage ‘][‘ error ‘] == 0 ) <
$up = move_uploaded_file ( $_FILES [‘ userImage ‘][‘ tmp_name ‘], $image_folder. $_FILES [‘ userImage ‘][‘name’]);
if($up) <
$uploaded = true ;
>
>
>
?>

Панель выполнения загрузки Ajax для PHP


Я знаю Javascript, AJAX и JQuery и т.д., и я считаю, что панель выполнения загрузки может быть создана с использованием PHP, AJAX и Javascript и т.д.

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

Вот ссылка на руководство по PHP, но я не понял этого: http://php.net/manual/en/session.upload-progress.php

Есть ли какой-либо другой способ показать индикатор выполнения загрузки с помощью PHP и AJAX, но без использования какого-либо внешнего расширения PHP? У меня нет доступа к php.ini

Введение

PHP Doc очень подробно описывает

Прогресс загрузки будет доступен в супергелбале $_SESSION, когда выполняется загрузка, и когда для POST для переменной с тем же именем, что и для параметра INI session.upload_progress.name, установлено значение. Когда PHP обнаруживает такие POST-запросы, он заполняет массив в $_SESSION, где индекс представляет собой конкатенированное значение параметров session.upload_progress.prefix и session.upload_progress.name INI. Ключ обычно извлекается путем считывания этих настроек INI, то есть

Вся необходимая информация полностью готова к именованию сеанса PHP

  • start_time
  • content_length
  • bytes_processed
  • Информация о файлах (поддерживается несколько)

Все, что вам нужно, это извлечь эту информацию и отобразить ее в вашей HTML-форме.

Основной пример

a.html

Пример выполнения загрузки сеанса PHP

Вот лучшая оптимизированная версия Выполнение загрузки сеанса PHP

Скрипт прогресс бара загрузки файлов PHP + jQuery

Здесь могла бы быть ваша реклама

Покинул форум
Сообщений всего: 4574
Дата рег-ции: Июль 2006
Откуда: Israel

Секрет
Теперь, когда вы уже наверняка второпях отправили свой запрос,
я расскажу вам простой секрет, который сэкономит вам уйму ожиданий,
даже если первый ответ по теме последуем сразу же.

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


После этого приходится начинать уточнять этим неграмотным что мне надо.
Они что, сами читать не умеют? А уточнять приходится.
И иногда пока они переварят то что я им скажу проходит и не одна ночь..

Уверен что если бы я им сказал что у меня есть
фиолетовый квадрат, и нужно превратить его в синий треугольник
и я пытался взять кисточку, макнуть в банку и поводить ей по квадрату
но почему то кисточка не принимала цвет краски в банке,
то на мой вопрос — где взять правильные банки мне бы ответили гораздо быстрее
предложив её открыть, а не тратить еще стольник на жестянку.

Поэтому с тех пор я строю свои вопросы по проверенной давным давно схеме:
Что есть
Что нужно получить
Как я пытался
Почему или что у меня не получилось.

На последок как оно происходит на форумах

Новичок: Подскажите пожалуста самый крепкий сорт дерева! Весь инет перерыл, поиском пользовался!
Старожил: Объясни, зачем тебе понадобилось дерево? Сейчас оно в строительстве практически не используется.
Новичок: Я небоскрёб собираюсь строить. Хочу узнать, из какого дерева делать перекрытия между этажами!
Старожил: Какое дерево? Ты вообще соображаешь, что говоришь?
Новичок: Чем мне нравиться этот форум — из двух ответов ниодного конкретного. Одни вопросы неподелу!
Старожил: Не нравится — тебя здесь никто не держит. Но если ты не соображаешь, что из дерева небоскрёбы не строят, то лучше бы тебе сначала школу закончить.
Новичок: Не знаите — лучше молчите! У меня дедушка в деревянном доме живёт! У НЕГО НИЧЕГО НЕ ЛОМАЕТСЯ.
Но у него дом из сосны, а я понимаю, что для небоскрёба нужно дерево прочнее! Поэтому и спрашиваю. А от вас нормального ответа недождёшся.
Прохожий: Самое крепкое дерево — дуб. Вот тебе технология вымачивания дуба в солёной воде, она придаёт дубу особую прочность:
Новичок: Спасибо, братан! То что нужно.

Отредактировано модератором: Uchkuma, 26 Апреля, 2011 — 10:21:12

Отображение прогресса долгосрочного PHP-скрипта с использованием jQuery ProgressBar

Иногда документация jQuery заставляет меня чувствовать себя глупым как пост.

У меня есть приложение, которое использует PHP на сервере для обработки создания нескольких заказов (иногда более тысячи). Я пытаюсь выяснить, как этот скрипт (вызываемый через $ .ajax) уведомляет пользовательский интерфейс о своем состоянии.

Я понимаю элементы .onprogress, .success и .complete в $ .ajax, но не могу найти пример того, что должен делать скрипт PHP для передачи данных каждому из этих типов событий.

В javascript старой школы, используя ajax.readyState, вы можете извлечь события PHP.echo () из сценария для целей прогресса, а затем использовать событие PHP.exit () для завершения запроса.

Как это сделать в мире $ .ajax?

Большое спасибо от старой собаки, пытающейся научиться новым трюкам.

Решение

Выяснил это методом грубой силы.

Каждый раз, когда вы выполняете echo () со стороны сервера, пакет передается обработчику onprogress как e.target.responseText. Обратите внимание, что responseText продолжает расти с каждым ответом, поэтому вам потребуется переменная на стороне клиента, чтобы отслеживать его предыдущую длину:

Если результатом является json, вам нужно будет декодировать this_str (не responseText). Это лучше всего работает с другой техникой, потому что в зависимости от частоты обновлений с сервера ваш анализ может быть перегружен. Поскольку вы отправляете объекты json, вся строка responseText представляет собой серию объектов json, разделенных фигурными скобками с закрывающими и открывающими скобками «> <«. Так что разбейте его на части и используйте последние:

Функция успеха использует аналогичный подход для json:

Обратите внимание, что по мере начала работы будет несколько бесполезных событий onprogress; не забудьте проверить их и игнорировать.

Когда ваша серверная функция завершает работу или завершает работу (), ваша функция успеха и функция onprogress получат полную строку responseText. Если вы хотите сделать что-то другое в успехе, не забудьте отслеживать последнюю строку в responseText.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL