Итак, на странице есть форма с полем для выбора файла.
Если просто отправить эту форму, то браузер попытается вывести результаты, т.е. перезагрузит страницу. А нам она нужна для вывода индикатора загрузки. Поэтому нужно чтобы результаты отправки приходили не в текущее окно. Вообще говоря, результаты загрузки нам совсем не нужны, так что мы перенаправим их в невидимый фрейм.
- Делаем на странице невидимый фрейм
- Для формы устанавливаем target="имя_невидимого_фрейма"
Теперь при отправке формы страница не перезагружается. И, кстати, во время отправки форма нам тоже уже не нужна, а точнее, поле выбора файла и кнопка отправки.
- При отправке скрываем поле выбора файла и кнопку отправки
Для индикатора загрузки возможны варианты: а) переодически опрашивать состояние загрузки файла, б) открыть соединение, в которое сервер будет переодически скидывать состояние. Выберем вариант "а" - он проще в исполнении.
Организуем переодические запросы к серверу, возвращающие состояние загрузки. Какие именно данные входят в состояние загрузки? Минимум: размер файла, размер загруженной части, код состояния (ок, ошибка, что-то ещё).
Как именно получить эти данные, зависит от реализации загрузки. Один из вариантов такой: Принимающий скрипт после приёма каждой порции данных складывает данные состояния загрузки в известное место - строку БД или файл, по ID загрузки. Так как ID загрузки должен быть известен на клиенте, то и формировать его будет тоже клиент (например, с помощью Math.random()). Нужно добавить его скрытым полем в форму отправки файла и в запрос состояния. Что получилось.
- Перед отправкой файла формируем ID загрузки и добавляем поле в форму отправки
- Принимающий скрипт после приёма каждой порции сохраняет данные состояния загрузки (куда-нибудь), с идентификатором ID загрузки.
- Со страницы идут AJAX запросы состояния (с ID загрузки) каждые 2-4 сек.
- При получении данных о состоянии загрузки, на странице обновляется индикатор загрузки.
Индикатор может быть простой строкой "Загружено XX из XXX Кб" или "графическим" - можно пропорционально изменять ширину div'а, к примеру.
Осталось только по окончании загрузки сохранить в БД информацию о сохранённом файле
- После приёма последней порции файла, информация о нём сохраняется в БД.
- В состояние загрузки записывается "ОК"
- После приёма на клиенте состояния "ОК" выключаем опрос состояния, скрываем индикатор загрузки и показываем пользователю "Приём файла завершён успешно".
В следующий раз рассмотрим отправку адресату ссылки для скачивания файла.