Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

File API: читаем джаваскриптом нужные файлы с компьютера посетителя сайта (по согласию этого посетителя)

JavaScript *
Сегодня PsychodelEKS точно подметил по поводу API джаваскриптового сжатия файлов, недавно встроенного Yahoo в BrowserPlus:
Уж было подумал, что они портировали алгоритм сжатия на js, но оказалось, что это просто браузерный интерфейс к архиватору =)

А вот возможность сжимать большие объёмы текстовых (json) данных на стороне клиента перед отправкой на сервер, была бы удобна в современных веб-приложениях.
Конец цитаты.

На эту тему я очень рад сообщить всем вам приятную новость: в недрах W3C редактор Арун Ранганатан (Arun Ranganathan) подготавливает черновик стандарта File API, в значительной мере поддерживаемого свежими еженощными сборками Файерфокса. Этот стандарт определяет особые API, посредством которых джаваскрипт может читать файлы на машине у пользователя, затем по-разному преобразовывать их, изготавливая при необходимости URLы «data:...» или base64-кодированные строки, а затем совершать с ними что угодно желаемое (например, отсылать на сервер, или использовать в джаваскрипте, или в CSS...).

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

(Это то самое и есть, что делает новый API BrowserPlus, так что тогда он не будет для этой цели нужен, а довольно будет и одного Файерфокса.)

Пока же этого ещё не произошло, я предлагаю вам лицезреть одно зрелищное приложение, недавно упомянутое на hacks.mozilla.org оно называется Font Dragr, навешивается на некоторый сайт и позволяет читателю сайта закинуть (drag-n-drop) на страницу этого сайта какой-нибудь файл шрифта с собственного диска, чтобы эта страница отображалась на сайте именно этим шрифтом. Отображаться начинает сразу же, так как файл не передаётся на сервер, а преобразуется и скармливается во браузер же, через CSS.

В частности, это полезно для разработчика такого сайта, чтобы у него не возникало надобности редактировать CSS на сервере всякий раз. С такой-то страницею можно даже в оффлайне работать.
Всего голосов 13: ↑7 и ↓6 +1
Просмотры 1.4K
Комментарии 3

HTML5 File API: множественная загрузка файлов на сервер

Разработка веб-сайтов *jQuery *
Из песочницы
Когда передо мной в очередной раз встала задача об одновременной загрузке нескольких файлов на сервер (без перезагрузки страницы, само собой), я стал блуждать по интернетам в поисках довольно корявого jQuery-плагина, который позволяет имитировать ajax-загрузку файла (того самого плагина, который со скрытым фрэймом: от java- и flash- плагинов сразу было решено отказаться). В процессе поиска я вспомнил, что в грядущем стандарте html 5 возможности по работе с файлами должны быть существенно расширены, и часть этих возможностей доступна уже сейчас. В итоге было решено опробовать их в действии.

Рассматривать возможности File API будем на примере одновременной загрузки нескольких картинок на сервер. В конце статьи приводится готовое решение, оформленное в виде jQuery-плагина.
Читать дальше →
Всего голосов 109: ↑103 и ↓6 +97
Просмотры 81K
Комментарии 57

Загрузка файлов с помощью html5 File API, с преферансом и танцовщицами

Блог компании VK

Предисловие


Загрузка файлов всегда занимала особое место в веб-разработке.
О трудности оформления стилями <input type=file/> уже сказано немало, почитать об этом можно, например, по ссылкам раз, два, три, четыре, пять, шесть.
Но и сам процесс загрузки файлов нетривиален, есть много разных способов – и ни одного идеального.

Я уже писал о внедрении на нашем проекте Файлы@Mail.Ru silverlight-загрузчика полгода назад. На тот момент у нас подерживались iframe, flash, silverlight и обычная загрузка файлов. Но прогресс не стоит на месте, и вот уже последние бета-версии всеми горячо любимых браузеров в полной мере поддерживают html5 FileAPI (справедливости ради, стоит заметить, что, как обычно, некоторые поддерживают своеобразно, но об этом — ниже).

Пока писалась статья, Chrome 9 был объявлен stable и форсировано обновился уже на 75% установок 8 версии. Так, что празднуем поддержку File API первым стабильным браузером, ура!

Мы подумали, что не использовать такую технологию было бы преступлением против юзеров пользователей.
Подумали — и внедрили html5 загрузку в дополнение к уже существующим вариантам.
В итоге наши пользователи получили множество плюшек:
— прозрачная дозагрузка после обрыва соединения (и даже рестарта браузера!);
— очередь загрузки;
— прогресс-бар (пользователи MacOS и Safari наконец могут видеть прогресс без всяких инородных плагинов), возможность удаления файлов из очереди, если передумал.
Как это устроено.
Всего голосов 132: ↑115 и ↓17 +98
Просмотры 43K
Комментарии 32

Новые возможности XMLHttpRequest2

JavaScript *
Перевод
Одним из незамеченных героев вселенной HTML5 является XMLHttpRequest 2. Строго говоря XHR2 не является частью HTML5 и не является самостоятельным объектом. XHR2 это тот же XMLHttpRequest, но с некоторыми изменениями. XHR2 является неотъемлемой частью сложных веб-приложений, поэтому ему стоит уделить большее внимание.

Наш старый друг XMLHttpRequest сильно изменился, но не многие знают о его изменениях. XMLHttpRequest Level 2 включает в себя новые возможности, которые положат конец нашим безумным хакам и пляскам с бубном вокруг XMLHttpRequest: кросс-доменные запросы, процесс загрузки файлов, загрузка и отправка двоичных данных. Эти возможности позволяют AJAX уверенно работать без каких-либо хаков с новейшими технологиями HTML5: File System API, Web Audio API, и WebGL.

В этой статье будут освещены новые возможности XMLHttpRequest, особенно те, которые можно использовать при работе с файлами.
Читать дальше →
Всего голосов 133: ↑129 и ↓4 +125
Просмотры 76K
Комментарии 32

Разработчики Google Docs делятся планами на будущее

IT-компании
Пять сотрудников из команды Google Docs провели сессию вопросов и ответов на Reddit и рассказали, над чем работают в данный момент. Суммируя итог интервью, можно отметить несколько проектов, которые будут закончены в ближайшее время.

Значительно улучшенное приложение под Android. Приложение под Android было одним из самых популярных вопросов, и разработчики заверили, что его ожидает «много и много улучшений». Например, редактирование документов без запуска браузера.
Читать дальше →
Всего голосов 44: ↑34 и ↓10 +24
Просмотры 600
Комментарии 26

Вышел IE10 PP2: WebWorkers, Drag & Drop, File API, CSS3 Positioned Floats, HTML5 Forms и многое другое

Блог компании Microsoft
(хотя на Хабре уже есть короткий пост-заметка про выход IE10 PP2, в этой статье мы хотим дать более корректный и полный обзор того, что нового появилось именно в IE10 PP2).

И так, в соответствии с заявленным сроком выпуска PP-версий для следующих версий IE раз в ~12 недель, мы выпустили очередное обновление. Выглядит IE10 PP2 также как и все предыдущие версии Platform Preview, а самое интересное, как всегда, внутри – обновленный движок Internet Explorer:



Ссылка на загрузку
Читать дальше →
Всего голосов 63: ↑46 и ↓17 +29
Просмотры 11K
Комментарии 28

HTML5-консоль от Google

HTML *
HTML5-консоль, который вы могли видеть в одном из выступлений на майской конференции Google I/O, работает в онлайне (судя по всему, только в браузере Chrome).



Презентация HTML5 Wow целиком была создана для демонстрации возможностей HTML5. Все демонстрационные примеры, в том числе консоль, выложены с открытыми исходниками.
Читать дальше →
Всего голосов 70: ↑60 и ↓10 +50
Просмотры 2.7K
Комментарии 23

Работа с бинарными данными с использованием типизированных массивов

Блог компании Microsoft Разработка веб-сайтов *JavaScript *
Перевод
Вместе с HTML5 в веб-разработку приходят новые API, расширяющие UX, привнося новые мультимедийные возможности и возможности взаимодействия в реальном времени. Зачастую этот функционал завязан на использование бинарных форматов файлов вроде MP3-аудио, PNG-изображений
или MP4-видео. Использование бинарных файлов крайне важно в данном контексте, так как позволяет уменьшить требования к ширине канала, добиться необходимой производительности и вместе с этим оставаться совместимым с имеющимися технологиями. Еще недавно у веб-разработчиков не было прямого доступа к содержимому этих бинарных файлов или любых других бинарных форматов файлов.

В этой статье мы рассмотрим, как веб-разработчики могут снять этот барьер, используя
Typed Arrays API для JavaScript, и использование нового API в демонстрационном примере Binary File Inspector на IE Test Drive.
Читать дальше →
Всего голосов 16: ↑14 и ↓2 +12
Просмотры 26K
Комментарии 3

Спасибо за HTML5 File API или читаем ID3-тег и заполняем форму не загружая MP3-файл

Разработка веб-сайтов *
Из песочницы
HTML5 Powered with Offline &amp; Storage
С появлением HTML5 у нас появляется много новых и интересных возможностей. Позволяющих создавать еще более качественные приложения.

Например, File API. Доступ к файлам клиента довольно удобная штука. Мы можем к примеру заполнить форму используя информацию из выбранного пользователем файла:
  • Заполнить форму об аудио-файле из тегов
  • Заполнить форму о фото из EXIF
Читать дальше →
Всего голосов 65: ↑64 и ↓1 +63
Просмотры 12K
Комментарии 12

Загрузка файлов через FileReader

JavaScript *
Из песочницы
Зачем я сделал ещё один велосипед?


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

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

На Хабре нашлись...
Всего голосов 12: ↑12 и ↓0 +12
Просмотры 7.9K
Комментарии 16

Загрузка файлов на сервер в 2012 году

Блог компании VK Разработка веб-сайтов *JavaScript *
В один прекрасный момент передо мной встала задача создать API для работы с файлами на клиенте и их загрузки на сервер.

Я работаю в Почте Mail.Ru, и моей прямой обязанностью является работа с JavaScript во всех его проявлениях. Прикрепление файлов к письму — одна из основных функций любой почты. Мы тут не исключение: у нас уже был Flash-загрузчик, который вполне исправно работал и долгое время нас устраивал. Однако у него был ряд недостатков. Вся верстка, графика, бизнес-логика, и даже локализация были зашиты в нем, в результате чего решение было громоздким, а внести правки мог только Flash-разработчик. В какой-то момент мы поняли, что нам необходим новый механизм. О том, как его создать, пойдет речь в этой статье.

Читать дальше →
Всего голосов 161: ↑146 и ↓15 +131
Просмотры 59K
Комментарии 71

FileAPI 2.0: Загрузка файлов на сервер год спустя

Блог компании VK Разработка веб-сайтов *JavaScript *
FileAPI 2.0Привет Хабр! Примерно год назад я представил вашему вниманию первую версию open-source библиотеки FileAPI, предназначенную для работы с файлами на клиенте и последующей загрузки на сервер.

За это время был пройден долгий путь. Библиотека заработала 670+ звезд и 90+ форков. С помощью github-сообщества удалось исправить множество «детских» проблем и внести ряд улучшений. Было закрыто более 100 тасков, и благодаря Илье Лебедеву сделана загрузка файлов по частям. Сегодня я с гордостью хочу представить вам FileAPI 2.0.
Читать дальше →
Всего голосов 166: ↑157 и ↓9 +148
Просмотры 68K
Комментарии 85

Создание превью изображений на клиенте: борьба с прожорливыми браузерами

Ajax *Разработка веб-сайтов *JavaScript *
Всем привет! Сегодня задача у нас следующая: необходимо создать интерфейс для загрузки картинок, который бы генерировал перед загрузкой превьюшки небольшого формата. На данный момент HTML5 вовсю шествует по планете, и, казалось бы, как это реализовать должно быть предельно ясно. Есть несколько русскоязычных статей на эту тему (вот, например). Но тут есть одно но. В рассматриваемом там подходе не уделено никакого внимания расходу памяти браузером. А расход может доходить до гигантских размеров. Разумеется, если загружать одновременно не более 5-10 картинок небольшого формата, то все остается в пределах нормы; но наш интерфейс должен позволять загружать сразу много изображений формата не меньше, чем у современных фотоаппаратов-мыльниц. И вот тогда-то свободная память начинает таять на глазах.
Постараемся вернуть украденную память
Всего голосов 99: ↑93 и ↓6 +87
Просмотры 32K
Комментарии 34

Textolite — система управления статическим сайтом

Блог компании Textolite CMS *PHP *
В последнее время в сети все чаще стали появляться обычные статические сайты, что не может не радовать. Неповоротливость некоторых популярных CMS только растет, при этом довольно часто CMS вообще не нужна. Статические сайты удобны со всех сторон, в сравнении с динамическими одни только преимущества. Такие сайты удобно разрабатывать, удобно использовать, приятно посещать, но неудобно обновлять. Решением этой проблемы может стать система Textolite, о которой я хотел бы рассказать подробнее.
Читать дальше →
Всего голосов 35: ↑22 и ↓13 +9
Просмотры 37K
Комментарии 38

Превью первых обновлений веб-платформы Microsoft Edge

Блог компании Microsoft CSS *HTML *Microsoft Edge
Перевод


На днях мы вывели наш портал для разработчиков Microsoft Edge Dev из бета-статуса, и теперь перенаправляем весь траффик со status.modern.ie на новую страницу со статусом платформы, которую мы существенно ускорили и визуально подчистили.

Сегодня мы рады рассказать вам первые детали о грядущей волне обновления функциональности веб-платформы Microsoft Edge. Начнем с рассказа о том, какие новые возможности сейчас находятся в разработке для EdgeHTML.
Читать дальше →
Всего голосов 24: ↑19 и ↓5 +14
Просмотры 11K
Комментарии 14

Кроссбраузерная отправка формы с файлом или как переписать весь отправщик несколько раз после тестирования в IE

Ajax *JavaScript *Internet Explorer
Tutorial
Задача: отправка и обработка файлов с помощью FormData и FileReader в форме со всеми возможными полями и пересылкой дополнительных параметров для каждого поля c объединением всех данных формы (кроме файлов и системных полей) в общий массив.

Поддержка: все современные браузеры, IE 10+.

Плагины: jquery-2.1.4

image
Читать дальше →
Всего голосов 17: ↑13 и ↓4 +9
Просмотры 12K
Комментарии 11

Работа с файлами в JavaScript

Разработка веб-сайтов *JavaScript *Программирование *
Tutorial
Доброго времени суток, друзья!

Мнение о том, что JavaScript не умеет взаимодействовать с файловой системой, является не совсем верным. Скорее, речь идет о том, что это взаимодействие существенно ограничено по сравнению с серверными языками программирования, такими как Node.js или PHP. Тем не менее, JavaScript умеет как получать (принимать), так и создавать некоторые типы файлов и успешно обрабатывать их нативными средствами.

В этой статье мы создадим три небольших проекта:

  • Реализуем получение и обработку изображений, аудио, видео и текста в формате txt и pdf
  • Создадим генератор JSON-файлов
  • Напишем две программы: одна будет формировать вопросы (в формате JSON), а другая использовать их для создания теста

Если Вам это интересно, прошу следовать за мной.

Код проекта на GitHub.
Всего голосов 8: ↑6 и ↓2 +4
Просмотры 33K
Комментарии 1