Делаем файлообменник [2: Индикатор загрузки]

Итак, на странице есть форма с полем для выбора файла.

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

• Делаем на странице невидимый фрейм
• Для формы устанавливаем target="имя_невидимого_фрейма"

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

• При отправке скрываем поле выбора файла и кнопку отправки

Для индикатора загрузки возможны варианты: а) переодически опрашивать состояние загрузки файла, б) открыть соединение, в которое сервер будет переодически скидывать состояние. Выберем вариант "а" - он проще в исполнении.

Организуем переодические запросы к серверу, возвращающие состояние загрузки. Какие именно данные входят в состояние загрузки? Минимум: размер файла, размер загруженной части, код состояния (ок, ошибка, что-то ещё).

Как именно получить эти данные, зависит от реализации загрузки. Один из вариантов такой: Принимающий скрипт после приёма каждой порции данных складывает данные состояния загрузки в известное место - строку БД или файл, по ID загрузки. Так как ID загрузки должен быть известен на клиенте, то и формировать его будет тоже клиент (например, с помощью Math.random()). Нужно добавить его скрытым полем в форму отправки файла и в запрос состояния. Что получилось.

• Перед отправкой файла формируем ID загрузки и добавляем поле в форму отправки
• Принимающий скрипт после приёма каждой порции сохраняет данные состояния загрузки (куда-нибудь), с идентификатором ID загрузки.
• Со страницы идут AJAX запросы состояния (с ID загрузки) каждые 2-4 сек.
• При получении данных о состоянии загрузки, на странице обновляется индикатор загрузки.

Индикатор может быть простой строкой "Загружено XX из XXX Кб" или "графическим" - можно пропорционально изменять ширину div'а, к примеру.
Осталось только по окончании загрузки сохранить в БД информацию о сохранённом файле

• После приёма последней порции файла, информация о нём сохраняется в БД.
• В состояние загрузки записывается "ОК"
• После приёма на клиенте состояния "ОК" выключаем опрос состояния, скрываем индикатор загрузки и показываем пользователю "Приём файла завершён успешно".

В следующий раз рассмотрим отправку адресату ссылки для скачивания файла.