Прогресс загрузки файла jquery

HTML-код для формы загрузки файла:

Атрибут enctype="multipart/form-data" не обязательно использовать для загрузки файла через Ajax.

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

За передачу состояния о загрузке файла отвечает событие onprogress , появившийся в HTML 5.

Сервер получает данные как обычный файл, переданный через форму. Загрузить полученный файл в PHP можно через следующий код:

Пример загрузки файла на JavaScript без использования библиотек (файл на сервер не загружается).

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

Более новая информация по этой теме находится на странице 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 и jQuery кода, и создадим красивый прогресс бар загрузки файлов. Получится очень красивый скрипт, не верите, смотрите демо, или скачайте исходники.

Чтобы запустить этот скрипт, вам необходимо установить PHP APC библиотеку. Если у вас PHP 5.4, то библиотеку устанавливать вовсе не нужно. Для дизайна странички, мы также будем использовать bootstrap CSS библиотеку, но на этом мы останавливаться не будем. Ведь целью урока является создание прогресс бара, а не дизайн.

Файлы скрипта прогресс бара

Рассмотрим фундаментальный код скрипта. Весь архив скрипта, вы сможете скачать в конце урока.

get_progress.php

Следующий PHP код, будет идентифицировать степень загрузки файла на серверной стороне.

index.php

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

JavaScript файл

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

Заключение

Наслаждайтесь! Вот простой скрипт прогресс бара загрузки файла с участием PHP и jQuery. Сложного ничего нет, единственное, требуется наличие APC библиотеки, если версия PHP ниже 5.4. Надеюсь, вам понравилось, рассчитываю на интерактив в комментариях.