@llxff26 янв 2011 в 07:33

Загрузка файлов с помощью HTML5 и сколько раз мы сказали нехорошие слова

3 мин

7.5K

Веб-разработка *

Из песочницы

+81

Комментарии 67

@AStahl 26 янв 2011 в 08:00

>загрузчик фалов на сервер
Угловая скорость вращения дедушки Фрейда слегка увеличилась:)
Исправьте пожалуйста.

@llxff 26 янв 2011 в 08:02

спасибо, исправил)

@soltpain 26 янв 2011 в 08:04

в хроме невозможно выбрать более 10 файлов одновременно — можно это обойти?

@llxff 26 янв 2011 в 08:59

Проблема заключается в том, что общее количество символов в именах файлов не должно превышать ~220 символов. Пока вроде такая проблема только в хроме на винде.

codereview.chromium.org/4198004

@OlegoO 26 янв 2011 в 08:27

Спасибо за информацию. Как раз щас предстоит делать загрузку файлов на HTML 5, в дополнение к Silverlight.

@llxff 26 янв 2011 в 08:29

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

@p00h 26 янв 2011 в 08:40

Непременно глянем-с!

@Tucker56 26 янв 2011 в 08:45

А как вы решили проблему загрузки файлов с помощью Ajax в ИЕ и Опере?

@llxff 26 янв 2011 в 09:07

флеш :)

@Tucker56 26 янв 2011 в 13:07

Свой загрузик пишите или какое-то решне выбрали? По универсальности мне больше этот нарвится www.plupload.com/example_custom.php, но уж слишком громоздкий.

@llxff 26 янв 2011 в 15:17

Да, скорее всего plupload.

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

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

@Tucker56 26 янв 2011 в 15:32

Да, у plupload можно выкинуть весь его гуи и использовать только ядерное апи.

И поскорей бы все браузеры подтянулись с FormData.

@marselester 26 янв 2011 в 08:49

На это тоже стоит взглянуть.

@dapmoed 26 янв 2011 в 16:36

Пересмотрел кучу плагинов и решений на HTML5. Valums — показался мне лучшим вариантом. Стилизовать легко, необходимые функции написаны, работает во всех браузерах.

@dapmoed 26 янв 2011 в 16:43

Вот кстати пример с использованием Valums — dapmoed.ru/elfinder-demo/

@marselester 26 янв 2011 в 18:03

Спасибо, elFinder-у действительно не хватало нормального мультиаплоадера.

@cream_brule 26 янв 2011 в 08:57

у меня завис ваш пример, что-то он корявый, я все же ухитрился бы флэш привязать. в свое время облез кучу всего, нужно было в реальном времени подгружать кучу файлов и чтобы они тут же парсились и появлялись на сайте в реалтайме, так вот пользовал и аякс на jquery и все что угодно, были проблемы пока полностью не перешел на флэш загрузку: быстро, удобно, красиво, есть прелоадер (а это важно было в моем проекте, ибо файлы иногда лились по 20-30 мегов и пользователь видел что сайт не завис). вобщем пришлось выучить флэш и написать свой загрузчик…

@FractalizeR 26 янв 2011 в 09:15

вобщем пришлось выучить флэш и написать свой загрузчик…

Разве мало готовых флеш-загрузчиков?

@cream_brule 26 янв 2011 в 08:59

@llxff 26 янв 2011 в 09:07

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

Собственно, сейчас и делаем флеш загрузчик.

@Demetros 26 янв 2011 в 09:19

Каждый изобретает свой велосипед.
Самым «вкусным» в виде Blob вы не воспользовались.

Нельзя использовать readAsBinary, на больших файлах это сожрет всю память юзера.

FF редко вызывает событие progress у XMLHttpRequest, в отличии от хрома или Сафари.

А вы пробовали вешать обработчик на xhr.upload.onprogress?

@Demetros 26 янв 2011 в 09:27

Прошу прощения, заглянул в код, там обработчик на xhr.upload.onprogress вешается.
Значит это глюк ФФ, по спецификации www.w3.org/TR/XMLHttpRequest2/#make-upload-progress-notifications событие должно вызываться либо раз в 50мс, либо на каждый байт, в зависимости от того, что происходит чаще.

@llxff 26 янв 2011 в 09:46

факт в том, что получить 100% ни разу не удалось) Хотя иногда доходило до 99, но чаще всего останавливается в пределах 80

@kratkar 26 янв 2011 в 09:30

Не смотрели www.plupload.com/index.php?

@llxff 26 янв 2011 в 09:54

смотрим) Но я так понял, он тоже по одному отправляет?

@Demetros 26 янв 2011 в 09:56

Я так и не понял, зачем вам отправлять файлы группами?

@llxff 26 янв 2011 в 11:00

Для того, чтобы уменьшить количество соединений

@Demetros 26 янв 2011 в 11:10

Хм, очень странный аргумент.
А зачем вам уменьшать кол-во соединений? Вы уперлись во что-то? Или просто так захотели от балды?

@llxff 26 янв 2011 в 12:44

Ну, не могу дать точного ответа. Наверное, от балды — испугались возможной тысячи юзеров, одновременно решивших загрузить 1000 файлов)

@Demetros 26 янв 2011 в 12:54

А вы не пугайтесь, если конечно вы используете nginx или что-то подобное.
Поверьте мне, ваши диски раньше начнут «втыкать», чем вы достигните тысяч соединений.

@llxff 26 янв 2011 в 13:19

Ну да, но все же мало ли что, тем более было интересно, возможно ли это сделать)

@kratkar 26 янв 2011 в 10:25

Да, по очереди.

@Borro 26 янв 2011 в 10:27

Кстати Опера тоже поддерживает Мультизагрузку файлов. В ней ваша форма застряла на

Output:

STARTING ...

@llxff 26 янв 2011 в 10:58

Опера не поддерживает FormData и FileApi

@vovich 26 янв 2011 в 11:26

использовал habrahabr.ru/blogs/webdev/109079/ — работает все хорошо, ждем когда в safari заработает

@llxff 26 янв 2011 в 12:51

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

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

@safron 26 янв 2011 в 21:08

Я пошел по этому же пути и добавил в свой код использование FormData там, где это возможно. Получилось, наверное, почти как у вас. Тока я еще в jQuery-плагин все это завернул.

@safron 25 фев 2011 в 01:36

Лучше поздно, чем никогда :)

Если интересно, то вот jQuery-плагин по мотивам моей статьи, использующий FormData там, где это возможно, и позволяющий управлять очередью загрузок. В самом файле есть описание его использования. Ссылку на работающий пример и кое-какие подробности можно увидеть в UPD той самой статьи.

@llxff 27 фев 2011 в 14:04

посмотрим, спасибо)

@safron 26 янв 2011 в 21:02

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

@BearMef 26 янв 2011 в 13:55

Давать читать это всем, кто начинает писать статьи на Хабре! 5 минут на чтение — минус рабочая неделя на мозготоптательный дебаг…
Статей по поводу работы с HTML5 немеряно, но статей с четкой постановкой задач и указанием на нюансы и без воды — единицы.

Респект.

@llxff 26 янв 2011 в 14:29

спасибо)

@Demetros 26 янв 2011 в 14:10

Используйте plupload либо мою альтернативу Lightweight Uploader
Если хотите иметь регулярный секс — то, конечно, пишите своё )

@llxff 26 янв 2011 в 14:30

да, мы остановимся на plupload, наверное. Но иметь регулярный секс полезно для здоровья все равно)

@Tucker56 26 янв 2011 в 15:40

Кстати, хорошая у вас альтернатива. А для чего nginx используете при аплоаде?

Будет ли ваше решение загружать файлы, если файлы будут закачиваться с адреса, например, site.ru на адрес u1.site.ru?

@Demetros 26 янв 2011 в 15:58

nginx вместе c upload-модулем используется:
а) для того, чтобы бэкенд вступал в дело только после полного окончания загрузки; при этом не происходит копирование файла в STDIN бэкенда, ему передается лишь ссылка на уже сохраненный upload модулем временный файл
б) для поддержки дозагрузки, которую дает upload модуль

Будет ли ваше решение загружать файлы, если файлы будут закачиваться с адреса, например, site.ru на адрес u1.site.ru?

Хороший вопрос )
Будет (после небольшого фикса с моей стороны) и если использовать последнюю версию upload модуля из гита, которая обрабатывает метод OPTIONS с помощью директивы upload_add_header.

@Demetros 26 янв 2011 в 16:50

Я имел в виду, что фиксить надо html5 загрузку, конечно же.
Flash и Silverlight загрузка будет работать между доменами при правильно настроенных файлах u1.site.ru/crossdomain.xml и u1.site.ru/clientaccesspolicy.xml (хотя по идее и первого будет достаточно).

@Demetros 26 янв 2011 в 17:34

Собственно, в гите уже есть фикс для кроссдоменной html5-загрузки.

@Tucker56 26 янв 2011 в 18:18

Спасибо. На днях попробую внедрить вашу загрузку в свой проект.

@Tucker56 26 янв 2011 в 21:43

А загрузка будет работать без upload-модуля? Так как если его ставить, то нужно собирать энджинкс в ручную, а это не есть debian way на продакшен сервере.

@Demetros 27 янв 2011 в 06:12

Будет, если вы сами повторите протокол частичной загрузки на бекенде.
Сильверлайт очень плохо загружает большие файлы целиком, точнее сначала полностью загружает в память (видимо для высчитывания заголовка Content-Length, который вручную нельзя установить), и только потом начинает загружать на сервер.

@Tucker56 12 фев 2011 в 14:55

А может дороботать ваше решение, что бы частичная загрузка работала опциоанльно. Что бы ее можно было оключить, если upload модуль не установлен. Тогда это решение будет более универсальным и не заточеным под энджинкс с его модулем.

@Demetros 12 фев 2011 в 15:56

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

@Demetros 12 фев 2011 в 15:58

А что такое «debian way»? И почему он не совместим с ручным билдом?

@Tucker56 12 фев 2011 в 16:37

Это когда все программы ставятся из пакетов. И ручная сборка не приветствуется. Потому что пакеты имеют тенденцию обновляться закрывая баги или при выходе новых версий. И обновление всего ПО на сервере в этом случае приосходит с помощью одной одной/двух команд. А при ручной сборе, необходимо при выпуске новых версии все пересобирать в ручную и еще отслеживать версии. Короче гемор один и усложнение жизни админу. Поэтому в пакетных операционках не приветствуется ручная сборка пакетов.

@llxff 26 янв 2011 в 16:28

Нет, не думаю.

developer.mozilla.org/En/Same_origin_policy_for_JavaScript

@Demetros 26 янв 2011 в 16:45

Ошибаетесь.
dev.w3.org/2006/waf/access-control/ — это уже поддерживают Chrome, Safari и Firefox. Ребята из Opera как обычно заняты им одним ведомыми делами, но думаю скоро и они подтянутся.

@llxff 26 янв 2011 в 18:34

Я сначала не заметил, что вы ответили. Но все равно не знал, спасибо)

@barmaley_exe 26 янв 2011 в 15:35

Стоит упомянуть, что sendAsBinary — отсебятина Mozilla и нигде, кроме FF, не существует.

@llxff 26 янв 2011 в 15:51

Да. В презентации есть это, там еще кстати рассмотрены некоторые аспекты, которые в статье не упоминались.

@Azurre 30 янв 2011 в 22:02

Если загрузить файл драг&дропом, а затем попытаться загрузить через кнопку, то в хроме выпадает ошибка Uncaught ReferenceError: onuploaded is not defined.