Для того чтобы прочитать файлы пользователя с его компьютера, нам понадобится помощь интерфейса FileReader. Этот интерфейс возвращает объект с несколькими методами, позволяющими добраться до содержимого каждого файла:
— readAsText(file, encoding). Можно применять для обработки текстового содержимого. Событие load срабатывает на объекте FileReader после того, как загрузка файла завершается. Содержимое возвращается в виде текста в кодировке UTF-8, если только в атрибуте encoding не задан какой-либо другой вариант кодирования. Данный метод пытается интерпретировать каждый байт многобайтовой последовательности как текстовый символ;
— readAsBinaryString(file). Считывает информацию как последовательность целых чисел в диапазоне от 0 до 255. Он просто просматривает каждый байт, не пытаясь никак интерпретировать его значение.
Данный метод удобно применять для обработки двоичного содержимого, такого как изображения или видео;
— readAsDataURL(file). Генерирует представляющий содержимое файлов URL данных (data:url) в кодировке base64;
— readAsArrayBuffer(file). Генерирует на основе данных файла данные в формате ArrayBuffer.
Листинг 12.3. Считывание текстового файла
Function initiate(){
Databox=document. getElementById(‘databox’); var myfiles=document. getElementById(‘myfiles’); myfiles. addEventListener(‘change’, process, false);
}
Function process(e){
Var files=e. target. files;
Var file=files[0];
Var reader=new FileReader();
Reader. onload=show;
Reader. readAsText(file);
}
Function show(e){
Var result=e. target. result; databox. innerHTML=result;
}
Window. addEventListener(‘load’, initiate, false);
Поле ввода данных в HTML-документе из листинга 12.1 позволяет выбрать файл для обработки. Чтобы реакция на действия пользователя была правильной, в листинге 12.3 мы добавили в функцию initiate() прослушиватель события change, связав его с элементом <input>, а для обработки события выбрали функцию process().
Свойство files, отправляемое элементом <input> (и API-интерфейсом Drag and Drop (Перетаскивание)), представляет собой массив, содержащий все выбранные пользователем файлы. Если для элемента <input> не добавлен атрибут multiple, то выбор нескольких файлов невозможен, в этом случае единственным доступным элементом массива становится первый. В начале функции process() мы извлекаем содержимое свойства files, помещаем его в переменную files, а затем выбираем первый элемент данного массива с помощью кода var file=files[0].
Для того чтобы больше узнать об атрибуте multiple, откройте листинг 6.17. Еще один пример работы с несколькими файлами вы найдете в листинге 8.10.
Если мы хотим обработать файл, то в первую очередь должны с помощью конструктора FileReader() получить объект FileReader. В функции process() из листинга 12.3 мы присваиваем этому объекту имя reader. После этого для объекта reader регистрируется обработчик события onload, который позволяет распознать ситуацию, когда файл готов к обработке. Наконец, метод readAsText() считывает файл и извлекает его содержимое в форме простого текста.
Когда метод readAsText() завершает чтение файла, срабатывает событие load и вызывается функция show(). Эта функция извлекает содержимое файла из свойства result объекта reader и выводит его на экран.
Создайте файлы с примерами кода из листингов 12.1-12.3.
Имена CSS-файла и JavaScript-файла объявлены в HTML-документе как file. css и file. js соответственно. Откройте шаблон в браузере и с помощью формы выберите один из файлов на своем компьютере. Поэкспериментируйте с текстовыми файлами и с изображениями, для того чтобы понять, как содержимое каждого типа файлов будет визуализироваться на экране.
Пока что внедрение возможностей файлового API и его спецификаций не завершено — разработчики браузеров еще работают над этим. Примеры кода из этой главы тестировались в Chrome и Firefox 4, но в последнем релизе Chrome пока не добавлен метод addEventListener() для объекта FileReader и др. По этой причине, чтобы код работал правильно, мы использовали в примерах обработчики событий, такие как onload. Например, мы добавили строчку reader. onload=show вместо reader. addEventListener(‘load’, show, false). Как всегда, вам понадобится протестировать фрагменты кода во всех доступных браузерах, чтобы выяснить, какие реализации готовы к использованию данного API.
Разумеется, в этом примере кода мы ожидаем, что пользователь будет открывать текстовые файлы, однако метод readAsText() может интерпретировать как текст любые данные, включая файлы с двоичным содержимым (например, изображения). Выбрав нетекстовый файл, вы увидите на экране множество забавных, но не слишком понятных символов.
Добавить комментарий