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

simonenko:

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

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

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

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

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

Пример кода.

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

Пример кода.

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

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

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

()
  1. dfitiskin reblogged this from simonenko
  2. simonenko posted this