JavaScript API: работа с файлами

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

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

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

Перечислим эти интерфейсы более подробно.

FileList - это интерфейс для обеспечения мультизагрузки файлов, представляющий собой массив индивидуально выбранных файлов. В качестве стандартного пользовательского веб-интерфейса используется стандартное поле выбора файлов <input type="file">. Кстати, в спецификации HTML 5 имеется и выбор файлов через "перетаскивание" drag'n'drop, но об этом - в следующих статьях.

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

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

Blob - этот интерфейс предоставляет доступ к файлу в бинарном виде, и, соответственно, позволяет разрезать файлы на кусочки.

Собственно, как видим, ничего революционного файловый интерфейс браузеров нового поколения собой не представляет. Например, запись напрямую в файл через API невозможна. Главное при работе с файлами - это безопасность.

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

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

Поддержка файловых спецификаций имеется в последних версиях браузеров Chrome и Firefox. Однако даже в них ещё не до конца реализованы все вышеперечисленные интерфейсы.

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

Определяем режим мультизагрузки

<input type="file" id="files" name="files[]" multiple /> 

В этом блоке выведем информацию о файлах

<div id="list"></div>
<script>
function handleFileSelect(evt) {
// Создаём список выбранных файлов
var files = evt.target.files;
// Это массив данных о файлах
var output = [];
for (var i = 0, f; f = files[i]; i++) {
// Отбираем только картинки
if (!f.type.match('image.*')) {
continue; } 
//Формируем список данных о файлах
output.push(f.name, f.type, f.size, '<br>');
}
document.getElementById('list').innerHTML = output.join('');
}
document.getElementById('files').addEventListener('change',
handleFileSelect, false);
</script>

Михаил АСТАПЧИК