jQuery File Upload

[ishaba]

Это просто подарок какой-то для админки которую сейчас делаю с twitter bootsrap. Cпасибо!

[alaevka]

Скоро все админки будут на одно лицо)

[Sannis]

Да и сервисы тоже :)

[Spaut]

Отлично! Также переделываю админку под twitter bootstrap и как раз искал какое-то решение для аплоада файлов. Единственное, что я сразу бы переделал — это оставил только кнопку «Add files...», а остальные показывал, если только были выбраны файлы для загрузки. И чекбокс справа от кнопки «Delete» не понятно зачем… сходу не понятно.

[igorakintev]

чтобы выделить все загруженные файлы

[akkuch]

До этой мысли доходишь спустя некоторое время, а поначалу решительно непонятно, что делает галочка.

[igorakintev]

как файлы загрузил так сразу и доходит, надо ее показывать после того как есть загруженные файлы, ну выше про это и пишут

[arinoki]

Определённо когда искал аплоадеры уже видел этот вариант. И он нихрена не заработал (
Можно написать что отдаётся php-скрипту после заливки?

[arinoki]

Я не об этом. Отдаётся как обычно массив с данными о файле (файлах) или нет.

[arinoki]

В PHP. Так-то по идее $_FILES.

[StopDesign]

Написал тупак — сиди и не жалуйся. Это лучшее, что можно сделать в данной ситуации.

[VolCh]

А зачем плюсовать какую-то розовую животину? Пингвина или робота я бы плюсанул по приколу… Пускай и не в тему. Но это не прикольно.

[VolCh]

Отчасти я согласен, но причём здесь эта розовая животина я не понял. С чем она должна была ассоциироваться?

[petrovnn]

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

[petrovnn]

то что в комментах это уже обсуждалось, возможно. я все комменты не читаю, и не встречал упоминания этого плагина. Да, пипл хавает, а чтож вы хотели, тут демократия. То что интересно для большинства — и будет в топе. Это нормально. И это отчасти следствие отмены денег за посты как вы говорите. И причина в редакционной политике, а не в авторе, которого вынуждают писать так текущие обстоятельства (правила, сложившаяся ситуация). Поэтому предъявлять претензии автору — не очень корректно, предъявлять претензии вам нужно владельцам хабра. А если вы не согласны с их редакционной политикой, чтож форкайте хабр как когда-то сделать денискин с веб-планетой.

[russum]

Ох, ши… посылаю Вам сердечных благодарностей от всего отдела.

[akkuch]

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

[igorakintev]

А у меня токен какой то хочет… SyntaxError: Unexpected token <, это возникает после загрузки файла.

[akkuch]

Наоборот не хочет, не ожидал он вас такой подставы, а вы ему токен. :)

[igorakintev]

вот что то ищу, ищу, в чем проблема и не понимаю вообще с какого перепуга он на это ругается и в каком месте возникает эта ошибка…

[akkuch]

Попробовал целенаправленно сломать. Не получилось. Покажете ошибку?

[Fesor]

токен это считай команда, формируемая лексером JS. Коротко говоря — в исходниках или в чем-то что выполняется лишний символ. Но это странно.

[igorakintev]

нашли ошибку, сервер заместо пхп скрипта отдавал корень сайта...)

[skobkin]

Может еще вылезать если не выданы права на запись files и thumbnails.

[dadon]

Не новенький конечно, но крутецкий плагин

[rowdyro]

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

И его значительно дольше кастомайзить, чем например qqFileUploader.

А по юзабилити конечно круто.

[evil_random]

Перепилил fileupload вдоль и поперек, переписал полностью fileupload ui. Ничего сложного там нет, перепиливается элементарно.

[rowdyro]

А я и не говорил, что трудно — просто дольше… что в принципе из Вашего коммента и следует.

Меня смущает лишь «коробочность» данного компонента, и отсутствие напильника в этой самой коробке.

[evil_random]

Там всё довольно подробно документировано.
Не понимаю какой ещё напильник там может быть?

А переписывал да, долго. Но я к нему ещё swfupload приделывал, да и очередь у меня не простая получилась.

[rowdyro]

Какой-то непонятный холивар)

Давайте я с другой стороны объясню свой посыл.

Вот на нескольких проектах я его использовал, мне понравилось, а в другом проекте понял, что надо закастомайзить нормально так… и потратив N времени на кастом, во время гугления наткнулся на несчастный qqFileUploader — 2 страница доки и профит получен за M времени, где M << N.

Сорри за напильник.

[VolCh]

Главная проблема так называемого повторного использования кода в том, имхо, что сначала ищешь чёрную кошку в тёмной комнате без уверенности, что она там вообще есть. А если поймал одну, то нет уверенности в том, что может есть (или нет?) и пожирнее понежнее, которая не сильно будет царапаться пока ты её напильком…

[bestfriend]

Великолепно после допиливания! Буду рад увидеть от вас еще какие-нибудь подобные находки :)

Всего наилучшего

[mishael]

В ИЕ8 мультиселекта файлов нет.
И сервер от хабраэффекта лег.
Рассажите как сделали ресайз на клиенте? Сколько фоток одновременно можно грузить не рискуя убить браузер? В АС3 максимум 100 фоток влазит на практике.

[cccr85]

Поддерживаю вопрос, тоже интересно

[maxstbn]

Беглым взглядом посмотрел на пример подключения к rails, там вроде ресайз на сервере организован

[coocheenin]

Так никто и не обещал такой поддержки.

IE8 (вероятно и IE9) не поддерживает мультиселект для аплоада, и вообще File API не поддерживает.

[alexmuz]

Это лучший аплоадер на jQuery! Использую его на нескольких проектах. Его довольно легко допилить под свои нужды, кстати.

[Sannis]

Не очень понятный Грязный интерфейс, имхо.

• Почему кнопка «cancel upload» активна до начала загрузки?
• Почему общая кнопка называется «Cancel upload», а у каждого файла просто «Cancel»? Наверное потому, что она должна называться «Delete»? А что тогда делает «Delete» в основном блоке с кнопками?
• И самое важное, что судя по всему в JS не обрабатываются ошибки при обращении к серверу. Сейчас сервер не доступен и это видно только по красному блоку, но кнопки при этом активны, но на нажатия никак не реагируют.

[Squier]

С полгода назад искал хороший аплоадер. Перебрал все, что только можно. В итоге остановился на plupload. Связка html5 и swf мне приглянулась. Да и управлять файлом после загрузки легко: там php файл отвечает за финиш. Использую его теперь везде, где требуется заливка.
По поводу аплоада из хаба, демо у меня не заработало. Скачаю, посмотрю.

[maratfmu]

Мне он тоже нравится, использую в своих проектах. Но prupload не поддерживает, к сожалению, превью изображений. А также качество сжатия не айс…

[Squier]

Мне это не нужно. Но, думаю, дописать не проблемой будет при необходимости.

[Chikiro]

С swf вечно у пользователей проблемы.

[nooze]

Та же история, перебирал пару месяцев назад несколько плагинов (включая и упомянутый в статье) и остановился на plupload как самом вменяемом и удобном в работе, без лишних приблуд. Даже немного лишнего убрал и он у меня стал выглядеть так.
Работа с ихображениями мне не требовалась. Сжатие предпочитаю делать своими средствами уже после загрузки

[shakalaka]

я так и не нашел отличий от предыдущей версии кроме добавленных иконок

[Flam]

Для Yii есть обертка xupload
Но мне тоже показалось что «нет нормального туториала»

[Groove]

blueimp.github.com/Bootstrap-Image-Gallery/
и вторая работа автора тоже хороша

[dizballanze]

Использовал в нескольких последних проектах — рекомендую, если надоели флешовые загрузчики

[Nc_Soft]

Плагин говно, в опере не работает мультивыбор.

[f1int]

Опера гавно.

[termi]

В 12 всё работает.
В 11.6* мультивыбор работает, но происходит ошибка в JS после загрузки первого файла.

[demimurych]

отсутствующий мултиселект в ИЕ8 крайне ограничивает область применения этого аплоадера.

[Sannis]

Это шутка? :)

[demimurych]

нет.
если я ничего не забыл то в Ие9 тоже мультиселекта не будет.

[StopDesign]

Отсутствующий мультиселект (и многое другое) сильно ограничивают область применения IE 8-9.

[sneer]

отсувствие поддержки ie8 and ie9 html5 должным образом ограничивает применение всего. У меня на работе сейчас для современных браузеров в хвост и гриву юзаются html5. Точнее собираемся зарелизить этот фунцкионал. Но ни ie8 ни ie9 не поддерживаются. UI team просто забил на них. Они обеспечивают что бы кое как работало и все. Фирма — номер1 производитель пк в мире, плюс не самый последний производитель серверов ) И мы не одиноки в таком решении. У нас стоит заглушка «использовать движок ие7» И все. Никакого ие9 нет и в планах. Это при том что на данный момент расматривается даже SPDY протокол. Пусть они сами ковыряют свое ослятину. Я конечно понимаю что это как-то не правильно… Но в глубине души радуюсь что таким образом смерть IE еще более близка. Потому что так разница в скорости будет еще более ощутима.

[VolCh]

А можно для справки (хотя бы в личку), кто у нас сейчас производитель ПК №1 в мире?

[xeLL]

Отлично прижился на рельсе, очень гибко настраивается!

[n0ne]

Расскажите, как прикрутили к рельсам 5ю версию… а может сделаете туториал? Думаю, многие были бы признательны.

[xeLL]

github.com/blueimp/jQuery-File-Upload/wiki/Rails-setup-for-V6-%28multiple%29
Вот тут посмотрите rails+carrierwave

[Semy]

А что значит SyntaxError: JSON.parse: unexpected character?

[Semy]

разобрался. там стоял php, но был не настроен. правда сейчас только небольшие файлы передаются. 2мегабайта — ошибка 1
ну ладно, я в принципе из любопытства поставил.

[VolCh]

Ограничения в php.ini?

[Semy]

Вот это только нашел. Оно по-дефолту довольно большое:
; Maximum size of POST data that PHP will accept.
post_max_size = 30M

[Doktor_Gradus]

Там ещё вот такое есть: upload_max_filesize

[Semy]

Да, спасибо, оно.

[VolCh]

Угу, его имел в виду.

[VolCh]

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

[Demir0]

смотри ограничение на сервере

[Semy]

Вообще-то не очень очевидное сообщение. И гуглится вообще всякое разное, совсем не связанное. Так что не очень понимаю минусы.

[Sannis]

Потому что не нужно гуглить это сообщение. Его нужно перевести и понять, что с сервера пришла неверная строка, которую JS пытается распарсить. После через через developers tools любого браузера посмотреть, что же такого неверного ответил сервер.

[Semy]

К сожалению слова «сервер» в сообщении нигде нет.

[Sannis]

К сожалению, чтобы разрабатывать функционал загрузки файлов, нужно знать, что для этого нужна клиент-серверная архитектура ;)

[Semy]

Я не об этом. В сообщении этого нет. Я не могу быть уверен, что jq в данном моменте парсит именно вывод сервера.
И да, это первый jq-скрипт, который я попробовал.

Для примера, варианты сообщений, по которым можно догадаться, что именно не так:
JSON.parse: unexpected character in server output
JSON.server_output.parse: unexpected character
JSON.parse(server_output): unexpected character
Server output: JSON.parse: unexpected character

[danko_59]

Как насчет IE9?

[sneer]

IE9 Это совершенно отсталый браузер. Вам внушили что он современный?
Вот список того что он не поддерживает.
Application Cache (offline)
Web Workers (threads in JavaScript)
HTML5 Forms (validation mechanism, CSS3 selectors)
JavaScript Strict Mode
ForeignObject (embed external content in SVG)
SMIL Animations (SVG animations)
File API
WebGL (3D)
CSS3 Transitions (for animations)
CSS3 Text Shadow
CSS3 Gradients
CSS3 Border Image
CSS3 Flex box model
ClassList APIs
FormData
HTML5 History API
Drag'n Drop from Desktop
Поэтому, или смиритесь и используйте это в современных десктоп браузерах, либо на мобайл. Благо там никаким ие не пахнет)

[danko_59]

Я не говорю, что IE9 прогрессивный браузер.
Просто я уже пол года в поисках мултиаплодера, который бы работал в эксплорере (хотя не скажу, что так уж сильно искал). Никто не поддержиает. Интересно почему? Я понимаю, что IE9 не сахар, но ведь нельзя просто забить на 20% пользователей.

[bar_boss]

С цифрой ошиблись раза в 2

[alexbeep]

Uploadify

[VolCh]

Насчёт ие на мобайл я бы не был столь категоричен. Особенно через год. Не то что пахнуть, а… Ну, вы поняли…

[sneer]

ну пусть сначала зарелизят да продадут, а там посмотрим, а пока это как геев в сша больше чем в мире пользователей ие 9 на мобайле.

[sneer]

За год ничего кардинально не изменится — не будут за этими планшетами стоять в очереди. Это не айдпед. Будет какой-то процент но учитывая что релиз ос аж через пол года. Ничего кардинально не поменяется. К тому же кто сказал что на винде будут пользоваться ослом а нем же хромом и фф. Тем более если сделают такой же невероятно крутой хром как для андроида. Никакие ие10 и рядом не проходили.

[irsick]

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

[evil_random]

Я к нему swfupload прикрутил для ишаков и он стал прекрасен.

[RomanovAS]

Поделитесь костыликом?

[StopDesign]

Вот что будет, если программиста попросить сделать интерфейс.
Загрузи четыре файла и посмотри на 12 кнопок!

Я так понимаю, все эти превью на стороне клиента и кнопки старт/стоп нужны для того, чтобы перенести выбор файла из диалога «Open files» в браузер. А зачем? Два раза выбирать?

[gibson]

у меня вообще ошибка при загрузке «TypeError: Cannot convert 'iframe' to object» Опера 11+

[AlexeyRU]

Как-то так получилось что я как раз реализую сейчас этот плагин у себя в приложении и у меня очень не получается понять как запретить загружать больше 1 файла подряд.

Если последовательно выбрать два или три файла подряд — и нажать submit ( add у меня переопределен и data.submit(); срабатывает только при сабмите формы ) они загрузятся все подряд, а мне нужен только 1…

Причем, судя по всему, нативного способа очистить подобную очередь не существует. Кто может помочь?

[AlexeyRU]

github.com/blueimp/jQuery-File-Upload/issues/1119

[irsick]

Как пишут здесь, нужно установить параметр limitMultiFileUploads, равным 1.

[AlexeyRU]

Ну тут написано:
To limit the number of files uploaded with one XHR.
Т.е. это ограничение не на выбор одного файла, а на отправку многих файлов одним запросом.

[irsick]

Выше по тексту идет параметр singleFileUploads, в описание пишут:

By default, each file of a selection is uploaded using an individual request for XHR type uploads.
Set this option to false to upload file selections in one request each.

Note: Uploading multiple files with one request requires the multipart option to be set to true (the default).

[AlexeyRU]

Согласен. Но это даёт только то, что в диалоге нельзя выбрать много файлов с помощью Ctrl+click.

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

[irsick]

Значит, я не понял первоначальный вопрос. Похоже, единственный выход — сооружение костыля на базе API плагина.

[AlexeyRU]

Таки у меня не получилось… думаю это надо заметить автору и именно это я и сделал.

[isergeymd]

очень классная штука недавно ее интегрировал, поддерживает даже ie6

[FoMa_x86]

Буквально пару месяцев назад был в поиске удобного загрузчика файлов для своей системы управления.

В результате написал свой: alexey.fomazov.name/projects/uploader/

[isergeymd]

к сожалению в ie8 не работает

[tarya]

Оно так всегда. Ищешь ищешь(ну и словосочетание), потом или пишешь свое или чужое переписываешь до неузнаваемости, и уже с него не спрыгнешь.

[MechanisM]

Уже около полугода у меня в форках на гитхабе валяется. Я даже и подумать не мог что кого-то на хабре может настолько заинтересовать очередной загрузчик со стилем Bootstrap. Я без негатива, просто реально удивлен.

[dfuse]

Чем оно лучше или хуже Plupload? Хочется в подобных статьях увидеть некое сравнение с другими вариантами.

[ARCHANG3L]

А можно, как нибудь лимитировать количество возможных загружаемых файлов?

[onthefly]

maxNumberOfFiles: количество

[Hayden]

.htaccess в родительскую папку example.com/upload/ начинает запрашивать пароль кучу раз.
Однако если ставить пасс на папку /files то тогда кто угодно может посмотреть ваши файлы и что у вас там залито.

Есть способ засекурить все это как-то? Скрипт крутой и красивый, но безопасность меня сильно волнует.

[Hayden]

А так же /server/php/ сливает весь JSON кому угодно.

[Alexufo]

в .htaccess хапретите листинг Options All -Indexes

[Hocok_B_KapMaHe]

Когда-то плагин встраивал в свой проект.
Так вот, тест в IE9 не прошел успешно. Дело не в html5 а вот в чем:
При загрузке большого файла, после того как нажать Cancel на форме оно как бы отменяется, но на самом деле файл продолжает загружаться на сервер «в фоне»

Как не странно IE8 таким багом не обладает…

Сейчас перешел на qqFileUploader, и столкнулся с той же проблемой.

Если кто сталкивался, — поделитесь решением?