В 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. Групповая загрузка файлов
Добавить комментарий