Загрузка изображений в стиле Facebook с созданием эскизов

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

Мне нужен механизм загрузки изображений в стиле Facebook с использованием Codeigniter и javascript/jquery. Вот что он должен делать -

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

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

  3. Загрузка может быть последовательной (как это делает Facebook) или асинхронной (некоторые библиотеки загрузки, которые я обнаружил, работают таким образом).

  4. Что самое важное (и то, что ставит меня в тупик), так это создание эскизов. Я знаю, что существует технология HTML5/CSS3, позволяющая отображать эскизы до загрузки файлов, извлекая их непосредственно с жесткого диска пользователя. Но это не будет работать в IE8, и хотя меня не беспокоит то, что выбор нескольких изображений не работает в IE8, мне нужно, чтобы генерация эскизов работала в разных браузерах, включая IE8 (решение о совместимости браузера не является чем-то Я могу командовать, так что, пожалуйста, не придумывайте решение типа "К черту IE!").

Я пробовал использовать uploadify (у меня нет ограничений на использование Flash), но, похоже, я не могу настроить его под свои нужды. Хотя uploadify действительно отображает индикаторы выполнения, мне не удалось найти способ генерировать (и отображать) эскизы на лету в соответствии с описанным выше поведением. Я знаю, как работает генерация эскизов на PHP, но не могу понять, как это реализовать вместе с индикаторами прогресса. Я ищу подходящий вызов jQuery/ajax?

Любая помощь и/или указатели будут оценены. Я признаю, что мог пропустить вопрос StackOverflow, который мог бы решить мою проблему, поэтому, пожалуйста, направьте меня на эту страницу или на любую другую страницу, которая, по вашему мнению, поможет мне. Пожалуйста, не стесняйтесь предлагать загружать библиотеки, отличные от uploadify, которые, по вашему мнению, могут оказаться полезными.

Заранее спасибо. И спасибо, что прочитали все это - я изо всех сил старался сделать вопрос правильно описательным!


person Debadeep Sen    schedule 20.06.2012    source источник
comment
Вы уже сталкивались с плагином SWFUpload? См. документы здесь code.google.com/p/swfupload.   -  person Dexter Huinda    schedule 21.06.2012


Ответы (2)


Я использовал загрузку файла Jquery с хорошими результатами. Для этого требуется, чтобы IE был в режиме совместимости, но хорошо работал для chrome/firefox.

ОБНОВИТЬ. Теперь утверждается, что он поддерживает IE 6.0+.

person Kinjal Dixit    schedule 21.06.2012

Здесь я сосредоточусь на пункте 4. Это можно сделать, но в конечном итоге вы будете использовать iframes (да, я сейчас). Они могут быть меньше 1 пикселя, но они понадобятся вам, если вы хотите создать превью миниатюр. Хорошей отправной точкой будет здесь: http://www.zurb.com/playground/ajax_upload.

Что касается создания фактических изображений предварительного просмотра (меньших версий), вы можете использовать библиотеку изображений CI. Дайте мне знать, как это работает.

person Robert    schedule 20.06.2012
comment
Я проверил ajax_upload. Однако это не отображает индикатор выполнения; он отображает только кнопку счетчика (я хочу, чтобы пользователь получал некоторое представление о том, сколько было загружено, поэтому я был склонен реализовать индикатор выполнения). Что касается библиотеки изображений CI, да, она может генерировать эскизы, но мой вопрос: как узнать, когда загрузка завершена, чтобы я мог получить файл с сервера? - person Debadeep Sen; 21.06.2012
comment
Кроме того, ajax_upload, по-видимому, ориентирован на загрузку одного файла за раз. - person Debadeep Sen; 21.06.2012
comment
Конечно, но поскольку вы упомянули, что пункт 4 является наиболее важным, и любая помощь или указатели будут оценены, я решил поделиться тем, что у меня есть. - person Robert; 21.06.2012