Блог о современных технологиях в интернете

Node.js, MongoDB, CoffeeScript, JavaScript, HTML5, CSS3, Zend Framework, PHP, Git, Social, Analytics

Загрузка файлов с помощью File API, Drag & Drop и XMLHttpRequest

Все больше и больше новых спецификаций W3C реализуется в браузерах. Сейчас я вам хочу продемонстрировать как может выглядить закачка файлов с помощью современных технологий. В данном случае будут использоваться File API, Drag & Drop и XMLHttpRequest.

Сразу хочу дать ссылку на пример, он 100% работает в Firefox 3.6.

А теперь подробно разберем как работает скрипт.

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

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

Пример кода.

В-третьих, с помощью XMLHttpRequest мы можем отсылать данные в бинарном виде на сервер.

Пример кода.

Итого с помощью современных технологий мы получаем замечательный загрузчик без всяких там Flash и иже с ними.

Осталось дождаться как поддержка File API появится в WebKit (Safari, Chrome). И тогда я смогу пользоваться этим.

Первоначальный источник (на английском).

Комментировать

Заметки

  1. dfitiskin сделал(а) реблог этого от simonenko
  2. simonenko это опубликовал(а)