Как реализовать индикатор загрузки файла в Интернете?

Question

Я хотел бы показать что-то более значимое, чем анимированный GIF, пока пользователи загружают файл в мое веб-приложение. Какие у меня есть возможности?

Редактировать: я использую .Net, но я не против, если кто-нибудь покажет мне версию, не зависящую от платформы.

Answer 1

Если вас интересует, как все это вообще работает на клиент-сайте, вот оно:

Все решения подключают форму через javascript и меняют цель формы на вновь созданный, невидимый IFRAME. Затем они могут свободно использовать AJAX для запроса некоторого статуса файла с сервера.

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

Answer 2

Вот пара версий того, что вы ищете для некоторых распространенных наборов инструментов JavaScript.

• Mootools - http://digitarald.de/project/fancyupload/
• Extjs - http://extjs.com/learn/Extension:UploadForm

Answer 3

загрузка файла ASP.NET с в режиме реального времени индикатор выполнения

http://mattberseth.com/blog/2008/07/aspnet_file_upload_with_realti_1.html

Answer 4

Я пробовал различные техники и добился наибольшего успеха с SWFUpload .

Вы создаете и взаимодействуете с объектом SWFUpload, используя Javascript, но используете (скрытый) Flash-файл для выбора файлов, выгрузки и мониторинга хода выполнения загрузки. Вы можете указать широкий диапазон обработчиков событий Javascript (uploadStarted, uploadProgress, uploadError и т. Д.), Которые Flash будет вызывать во время загрузки, что делает его очень гибким. Он также реализует файловую очередь, поэтому он хорошо работает для одного или нескольких файлов.

Ссылки:

• API документация
• Демонстрация
• Загрузка

Answer 5

Некоторые полезные справки .NET для выполнения индикаторов выполнения можно найти в статьях MSDN Magazine Dino Esposito за июль и август:

Контекстно-зависимая обратная связь с AJAX (июль '07)
Отмена задач сервера с ASP.NET AJAX (август '07)

Answer 6

Индикатор прогресса jQuery UI - http://jqueryui.com/demos/progressbar/

Answer 7

Хороший пример того, как это сделать без использования Ajax, дан в CodeProject Nilesh Thakkar .