Если на вашем сайте необходимо предоставить пользователю возможность загружать большие файлы к вам на сервер, то ему было бы удобно видеть процент загрузки файла на сервер. Так как стандартная html-форма не позволяет этого делать, то существует множество решений, которые заполняют данный пробел. Можно написать поддержку progressBar и самостоятельно, но зачем изобретать велосипед? Если бы каждое поколение людей выдумывало свою реализацию готовых вещей, которая просто их повторяет, то мы бы были все еще в каменном веке. В этой статье будет рассказано о двух удобных готовых решениях для загрузки файлов на сервер через http с графическим отображением процента загрузки.
Первый из данных инструментов использует Flash и поэтому очень элегантно выглядит. Называется он FancyUpload.

Но красота конечно же не единственное достоинство этого компонента. Он позволяет добавить несколько файлов через графический интерфейс пользователя, а затем отправит всю очередь на сервер сопровождая это все анимационным progressBar. Но и недостатки тоже имеются. Например, не все версии Flash-плейера корректно работают с ним. В частности flash-player 9.0.124.0-10.1 для Linux вел себя следующим образом. Браузер замирал на время загрузки и прогресса не было видно. Затем, когда передача файлов заканчивалась, браузер показывал страничку с заполненным на 100% прогрессбаром. Нет уж, тогда простой submit html-формы куда как более простое решение, дающее такой же результат. Но возможно целевая аудитория вашего сайта такова, что пользователи Linux-десктопов для вас не большая потеря. Да и восторженных криков по поводу данного компонента полно по всему интернету. Так что попробовать вам его стоит.
На официальном сайте заявлено, что поддерживаются браузеры Internet Explorer 6+, Opera 9, Firefox 1.5+ и Safari 2+ с установленным Adobe Flash 9 player. Для работы этого компонента на вашем сайте вам потребуется так же MooTools JavaScript Framework 1.2.
На стороне сервера можно обратиться к загруженным файлам так:

• PHP: $_FILES['Filedata']
• Perl: $main::cgi->param(’Filedata’);
• Rails: params[:Filedata]
• ASP: Fancy Upload and Classic ASP

Где Filedata - это атрибут name элемента input с типом file используемый по умолчанию. Детали использования и примеры можно найти на официальном сайте.
Лицензия MIT.

Второй инструмент, о котором хотелось бы рассказать это XUpload. У него есть платная и бесплатная версии.

Платная версия довольно сильно отличается от бесплатной и напоминает десктопный download-менеджер. С графиком изменения скорости загрузки, с отдельным progressBar для каждого файла. Самая большая потеря, это пожалуй то, что бесплатная версия за один раз загружает только один файл. Полную сравнительную таблицу возможностей вы можете посмотреть на официальном сайте. В качестве серверного скрипта этот компонент использует perl. Вы можете скачать с официального сайта готовый к установке дистрибутив. После копирования файлов, выставления соответствующих прав доступа к ним и правки конфигурационного файла вы получите работающую форму загрузки. По окончании загрузки файл помещается в специальную директорию uploads.
Если вы покупаете версию pro, то использовать вы ее можете на одном домене. Для версии free ограничений нет. Вы можете как угодно изменять код и той и другой версии. Однако вы не можете распространять этот код. Тоесть исходя из лицензионного соглашения, если вы клиенту для его сайта установили модифицированную вами версию скрипта, то это нормально. Однако если вы начали скажем устанавливать отдельно или в составе другого приложения измененную версию второму, третьему клиентам, то это уже распространение и нарушает лицензионное соглашение.
Хотя не думаю, что вам захочется как-то изменять скрипт. И скорее всего клиенты будут довольны если вы к их сайту приладите free-версию без изменений. А по лицензии таких сайтов может быть сколько угодно. Ну измените дизайн. Но у каждого сайта он свой, а значит и менять придется каждую из копий по своему, что уже не нарушает лицензии.
Теперь у вас достаточно данных чтобы отдать какому-либо из готовых решений предпочтение. Еще нет? Тогда пробуйте каждый самостоятельно. Если вы все же решили написать что-то свое, то не торопитесь писать это с нуля. В следующей статье будет рассказано отдельно об Upload-компонентах и отдельно о progressBar на jQuery, которые могут стать частями вашего будущего решения.