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

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

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

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

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

var reader = new FileReader();
reader.onload = function(e) {
  var bin = e.target.result;
  // bin is the binaryString
};
reader.readAsBinaryString(file);

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

var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php");
xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
xhr.sendAsBinary(bin);

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

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

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