Index SiteMap Portfolio

Назад

апр
11

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

FancyUpload - Загрузка нескольких файлов на сервер с отображением индикатора Полезная связка JavaScript и FLASH для загрузки файлов на сервер с отображением индикатора. Предлагаю Вам видоизмененый общий перевод данной статьи. Возможно, он поможет Вам установить этот скрипт.


Возможности этого скрипта для загрузки файлов

  1. Выбор и загрузка нескольких файлов, индикатор загрузки файлов на сервер
  2. Фильтр файлов по типам в окне диалога выбора файлов
  3. Отображение размера файла до его загрузки
  4. Для работы нужен всего лишь флеш версии 8+
  5. Остановка загрузки, добавление файлов в очередь во время загрузки

Скрипт загрузки файлов на сервер заменяет обычный элемент выбора файла (небольшое поле с кнопкой "Обзор...") на то, что Вы можете указать при помощи метода createReplacement. Скрипт имеет множество настроек и по умолчанию настроен на множественную загрузку изображений, оформленную в виде очереди.

Нектороые замечания по установке

  • Запрос, отправляемый swf файлом не содержит информации о данных из cookie, либо дополнительной информации, которую нужно отправить post запросом. Есть только информация о файле в $_FILES['Filedata'] с некорректным типом отправляемых данных (application/octet-stream, а не image/gif, например, если Вы загружаете gif картинку). Если необходимо передавать ID сессии, то это нужно делать в get запросе, который отправляется файлу для загрузки. (например, "upload.php?SESSID=123456789abcdef").

  • Если скрипт загрузки файлов на сервер работает некорректно (элемент для загрузки файлов не заменился на то, на что Вы его заменяете методом createReplacement) то проверьте при помощи Firebug на вкладке Net/_Flash_, загрузился ли необходимый SWF файл.

  • IE определяет адрес скрипта для обработки отправленных данных (upload.php) относительно swf файла, а все остальные браузеры, относительно текущей страницы. Поэтому, вписывайте абсолютный путь к обработчику данных отправленной формы (в атрибуте action формы), где планируется замена элементов для загрузки файлов.

  • SWF файл обычно вставляется после тега . В Firefox могут быть ошибки, если объект вставлен в невидимой области экрана. Нужно будет проскроллить страницу до того момента, когда этот объект сможет инициализаироваться. В IE могут быть ошибки, если SWF объект спрятан в невидимый блок.

После этого перевода, примеры загрузки файлов на сервер легко поддаются изучению даже на английском языке :) Описание FancyUpload находится здесь. Чтобы посмотреть, как это сделано по-настоящему, рекомендую смотреть исходный HTML код данного примера.

Вам понядобятся 4 файла для данного скрипта: FancyUpload.js, Swiff.Base.js, Swiff.Uploader.js и Swiff.Uploader.swf. Ну и конечно же mootools :) Ссылки на них можно найти на странице описания этого скрипта либо на странице, демонстрирующей работу этого скрипта.

Добавить в закладки на google.com Добавить в закладки на bobrdobr.ru Добавить в закладки на del.icio.us Добавить в закладки на technorati.com Добавить в закладки на linkstore.ru Добавить в закладки на news2.ru Добавить в закладки на rumarkz.ru Добавить в закладки на memori.ru Добавить в закладки на moemesto.ru


Ваше мнение

* Имя:
* E-mail:
*Этот адрес не публикуется. Для общих контаков оставляйте адрес в комментарии.
Сайт/Блог:
Примечание. Комментарии находятся в теге <noindex>, что значит: смысла срать здесь нет.

Комментарии

12.05.2008 SavePic
Классный скрипт! Видел его реализацию на многих файлообменниках. Спасибо за материал. Возможно в будущем пригодится.
 
26.05.2008 Андрей
А можно всё таки заставить FancyUpload передавать коректный mime-тип файла?
 
27.05.2008 RandomJohn
в ie7 все расползается, тихий ужас
 
27.05.2008 Евгений
Андрей, думаю, что нельзя. Иначе это было бы сделано. Но ведь его можно получить, когда файл загрузится на сервер. Лично я не представляю, зачем его узнавать раньше. Чтобы выдать алерт о некорректном типе, можно проверить расширение файла. Так я думаю.
 
15.09.2008 izumeroot
У меня почему то и на демо-странице и на собственной странице при загрузке файла браузер замирает на время загрузки. А потом когда уже файл по-видимому загружен прогресс-бар быстро добегает до 100%. Как то не правильно. Гораздо боле приятные впечатления у меня от этого скрипта http://www.sibsoft.net/xupload.html. Но вот не могу у себя заставить его работать. cgi-скрипт не выполняется.
 
15.09.2008 Евгений
izumeroot, скорее всего, пользуетесь слишком экзотическим браузер. Возможно, хром? :)

С xupload доводилось иметь дело (с PRO версией). Работает как надо, причем не нужен никакой флеш. Хорошая штука, но за деньги. А за бесплатно - я эту флешевую версию выбрал.
 
15.09.2008 izumeroot
Нет, вовсе не экзотический. FireFox3 for Linux. =)
Xupload имеет и бесплатную версию. Вот тут у них таблица сравнения http://www.sibsoft.net/xupload.html#features . Там и демка для бесплатной версии тоже есть на сайте. Я ее и ставлю. Вот тут на моем сайте можно ошибку посмотреть в попапе. http://photos.firstvds.ru/upload_form.html
 
15.09.2008 Евгений
Чтобы устранить ошибку, почитайте инструкцию от провайдера, какие права должны стоять на cgi скриптах. Попросите их установить тестовый скрипт, который, обычно, выводит переменные окружения. Если он заработает, то нужно внимательнее читать инструкцию к скрипту xupload :)
 
15.09.2008 izumeroot
Инструкцию читал 3 раза. =) Права везде стоят 777. Вот по тестовому скрипту щас поищу инфу. Спасибо!
 
16.09.2008 izumeroot
Оказывается нельзя чтобы стояли права на запись для других пользователей для этих скриптов. Заработало. Наслаждаюсь. Версия бесплатная, код открыт =)
 
23.10.2008 Руслан
Все сделал как нужно, только вот флеш почему-то не хочет загружаться из скриптов :( По этому вылетает ошибка в строке 44 файла FancyUpload2.js
 
24.11.2008 IzumeRoot
Мой совет - не используйте флеш-решения. Вы очень сильно будите зависеть от версии флеша у пользователей. Возможно что половина пользователей будут видеть прогресс некорректно.
Одно из решений без флеша упоминается здесь http://web-linux.ru/?p=417
Ответ:Благодарю за ссылку, а тем более за обоснованный совет!
 
05.05.2009 sdsdsds
мерзкий вариант..... надо сказать...... некультурно так
 
05.05.2009 sdsd
в эксплоере эта фрма поверх текста. и прямо неприятно. это в коммент к посту выше. в мозиле норм.
 

Добавить в закладки на google.com Добавить в закладки на bobrdobr.ru Добавить в закладки на del.icio.us Добавить в закладки на technorati.com Добавить в закладки на linkstore.ru Добавить в закладки на rumarkz.ru Добавить в закладки на memori.ru Добавить в закладки на moemesto.ru


 Бесплатно

Читать мою ленту