File API — Ура! Свершилось!

В HTML давно существует тип file элемента input, предназначенный для загрузки файлов на сервере. В целях обеспечения безопасности возможности этого элемента крайне ограничены (это очень мягко сказано), пользователю оставлено только одно действие — выбрать файл в локальной файловой системе, который при отправке формы будет загружен на целевой сервер.

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

Для этого создадим такую HTML-разметку:

<input type="file" id="myFile" name="myFile" /> <br>

<div id="gallery"></div>

Зададим стили для будущих иконок (по сути, создадим класс):

<style>

.icon { height: 75px: margin: 10px:

}

</style>

Теперь начнем использовать новое API.

Сначала создадим функцию — обработчик выбора файла:

Function handleFileSelect(evt) { var files = evt. target. files; var reader = new FileReader(); alert(files[0].name):

Reader. onload=function(e){ var span = document. createElement(‘span’);

Span. innerHTML = [‘<img class=”icon” src=”’, e. target. result,’” title=”’, files[0].name, ‘”/>’].join(»);

Documentation(‘gallery’).insert Before(span, null);

}

Readership(files[0]):

}

Осталось связать эту функцию с элементом input:

<script>

Documentation(‘myFile’).adventitiousness(‘change’, handleFileSelect, false):

</script>

И проверить работу нашего приложения (рис. 76).

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

Прежде всего в строчке

Var Firefox = evt. target. files;

В переменной Firefox мы получаем объект класса FileList, представляющий собой массив объектов File. В данном случае это массив из

Рис. 76. Загружаем картинки на страницу с помощью File API

Одного элемента, но мы это еще исправим ниже. А пока рассмотрим еще один объект (если точнее, интерфейс) — FileReader (названный так, наверное, чтобы возродить слегка подзабытую путаницу с Java/ JavaScript).

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

— FileReader. т eadAsBinaryString(Blob|File) — чтение в бинарном режиме. Результат будет содержать строку байтов;

— FileReader. readAsText(Blob|File, opt_encoding) — текстовый режим. Результатом будет текстовая строка в заданной кодировке (по умолчанию — UTF-8);

— FileReader. readAsDataURL(Blob|File) — чтение URL-файла (результат — не строка, а объект dataURL!);

— FileReader. г eadAsArrayBuffer(Blob|File) — результат — данные в виде ArrayBuffer (общий контейнер фиксированной длины для бинарных данных).

FileReader также поддерживает обработку следующих событий:

— onloadstart — вызывается в момент начала чтения файла;

— load — происходит после прочтения файла;

— abort — происходит при отмене чтения;

— error — происходит при ошибке чтения;

— loadend — происходит при завершении процесса чтения, вне зависимости от результата;

— progress — вызывается в течение чтения файла.

Теперь, я думаю, все понятно. Еще одно приятное новшество позволит воплотить в жизнь множественную загрузку файлов. Это атрибут multiple у тега input:

<input type="file" id="myFile" name="myFile" multiple />

И теперь, когда FileList может содержать более одного элемента, немного модернизируем handleFileSelect:

Function handleFileSelect(evt) { var files = evt. target. files; for (var i = 0; files[i]; i++) { var reader = new SileReader(); fileName = files[i].name; reader. onload=function(e){ var span = document. createElement(‘span’); span. innerHTML = [‘<img class="thumb" src="’, e. target. result,’" title="test"/>’]. join(‘ ‘); document. get ElementB yId(‘bar’).insert Before (span, null);

}

Reader. readAsDataURL(files[i]):

}

}

Рис. 77. Групповая загрузка файлов