Обзор файловых загрузчиков или еще раз про стилизацию инпутов

Обзор файловых загрузчиков или еще раз про стилизацию инпутов

Буквально на днях gMail внес небольшое изменение в свой интерфейс. Вместо обычного файл-инпута для прикрепления файла теперь используется swf-объект. Казалось бы, замечательно. Можно выбрать сразу несколько файлов, наблюдать индикатор загрузки. Но не стало очень приятной для пользователей Safari и Chrome фишки: возможности перетащить файл из окружения на файл-инпут.

Давным-давно я уже писал про стилизацию файл-инпутов. Мне показалось недостаточным, и позже было написано продолжение. Сегодняшняя статья посвящена уже не инструкции по изобретению колеса, а готовым решениям, которые реализуют загрузку файлов.

Безфлэшевые решения

1. Ajax upload

ajax Upload

Очень хороший инструмент, работающий без флэша. Нету никаких ограничений на стилизацию, позволяет удовлетворить желание пользователя поперетаскивать файлы на инпуты ;)

Много где работает:  IE6/7, FF2/3, Safari, Chrome, Opera.

Примечательно, что имеются разные версии для работы с jQuery, Prototype и независимо.

Демо

2. Решение от Жеки Белодеда

Ага, мое.

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

Работает во всех мажорных браузерах.

ДемоСтатьяИсходик примера

3. jQuery Multiple File Upload Plugin

Плагин, позволяющий из обычного файл-инпута сделать необычный. Например, встраивает возможность валидации, ограничить максимальное количество файлов для загрузки. Позволяет файлам назначать иконочки.

Демо

4. Ext.ux.FileTreePanel (Расширение для Ext.JS)

Смотрим

Решения, использующие флэш

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

Я рекомендую, если для себя вы выберете один из этих аплодеров, проверяйте наличие у клиента флэша. А если флэш отсутствует, заменяйте его одним из вышеприведенных.

1. SWF Upload

Самое популярное, на мой взгляд, решение. А SWFUpload достоет популярности.

Позволяет стилизовать все элементы загрузки (XHTML и CSS), показывает только необходимые типы файлов в диалоге выбора, js колбэки на все события. 

Рекомендуется к использованию.

ДемоЗагрузка

2. jQuery File Upload Plugin от Ронни Гарсия

Автору этого плагина чем-то не угодил SWFUpload. И он решил написать свое решение.

Возможностей не так много, как у SWFUpload, тем не менее оно тоже имеет право на существование. Хотя бы как плагин jQuery.

ДемоСкачать

3. FancyUpload

FancyUpload - полностью стилизуемый аплоадер с прогрессбаром. Для работы ему нужен MooTools.

Демо

4. Yahoo File Upload

Файл-аплоадер от яху преподносится с таким количеством документации, что возникает мысль, будто на основе этого аплоадера они собираются сделать по меньшей мере летающую тарелку.

Ни одного примера, на который приятно было бы посмотреть, нету. Документацию писали роботы. Чтобы разобраться надо иметь очень сильное желание.

File Upload в YDNСтраница с примерами

 

Если у читателей возникли какие-то мысли при прочтении статьи, милости прошу в комменты.

 

Расскажите друзьям

Оцените статью:
  • 1
  • 2
  • 3
  • 4
  • 5

Комментарии — 15

Анатолий
Здравствуйте, напишите пожалуйста статью о выборе Калькулятора цен на Java script, думаю, что это будет нужно не только мне.
#
Анатолий
Евгений
С вашими предложениями, пожеланиями, восхвалениями, мольбами, интимными тайнами и другими проблемами обращайтесь к нам по почте pisem@vremenno.net
Andron
Очень интересная и нужная статья.
Автору большое спасибо, в мемориз!
#
Andron
Гостомысл
Хорошие обзоры у Вас. Продолжайте в том же духе.
Александр
Кажется FancyUpload перестал нормально работать с Flash 10
придется переписывать jQuery upload для mootools
#
Александр
Марик
Нет ни одного скрипта для того чтоб видеть превьюшку и назначить главное фото.
А вообще подборка хорошая, спасибо.
CTAPbIu_MABP
появился еще один http://webreflection.blogspot.com/2009/03/multiple-upload-with-progress-every.html
Евгений
Спасибо, МАВР. Обязательно добавлю в обзор, когда этот аплоадер будет работать в Google Chrome.
Забавно. В этом аплоадере разные иконки для одинаковых файлов в IE и других браузерах.
Fx
http://www.michaelmitchell.co.nz/one-click-upload/ вот еще одно решение, которое стоит упомянуть
#
Fx
NickSun
Кто-нибудь пользовался SWFUpload 2? Не могу понять в чем прикол. У меня не запускается upload_url: "upload.php". Все файлы на месте. Может у кого-нибудь была такая проблема?
#
NickSun
Serg_pnz
Еще один алоадер без флеша http://joomlicious.com/Moo.Form/
Женя
Спасибо, Серж. Хорошее дополнение.
Сергей Наумов
Стоит также отметить, что YUI Uploader (у вас он называется Yahoo File Upload) используется на flickr.com. Поэтому зря вы на него так наехали =) Да и разобраться в нем не особо сложно, по крайней мере, я со своими скудными знаниями javascript смог это сделать.
#
Сергей Наумов

Новый комментарий

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть

metin2 pvp metin2 pvp serverler pvp serverler