Запись содержимого

Запись содержимого.

Чтобы записать содержимое в файл, нужно создать объект FileWriter. Этот объект возвращается методом createWriter() интерфейса File-Entry, дополняющего интерфейс Entry и предоставляющего два метода для работы с файлами:

— createWriter(функция для успешного завершения, функция для завершения с ошибкой). Возвращает объект FileWriter, связанный с выбранной записью;

-(функция для успешного завершения, функция для завершения с ошибкой). Этот метод мы будем применять позже для считывания содержимого файла. Он создает объект File (аналогичный тому, который возвращают элемент <input> и операция перетаскивания), связанный с выбранной записью.

У объекта FileWriter, возвращаемого методом createWriter(), есть несколько собственных методов, свойств и событий, упрощающих процесс добавления содержимого в файл:

— write(data). Именно этот метод занимается непосредственной записью данных в файл. Содержимое передается ему в атрибуте data в форме бинарного блока;

— seek(offset). Этот метод задает позицию в файле, начиная с которой добавляется содержимое. Значение параметра offset необходимо определять в байтах;

— truncate(size). Этот метод устанавливает новую длину файла, равную значению атрибута size (в байтах);

— position. Это свойство возвращает позицию в файле, в которой будет выполняться очередная операция записи содержимого. Для нового файла значение позиции равно 0, а для файла, в который уже записывалось содержимое или к которому ранее применялся метод seek(), значение позиции отличается от нуля;

— length. Это свойство возвращает длину файла;

— writestart. Это событие срабатывает, когда операция записи начинается;

— progress. Это событие срабатывает периодически и информирует о прогрессе операции;

— write. Это событие срабатывает после того, как запись данных завершается;

— abort. Это событие срабатывает в случае прерывания процесса;

— error. Это событие срабатывает, если происходит ошибка;

— writeend. Это событие срабатывает по завершении процесса.

Для подготовки содержимого, которое будет добавлено в файл, необходимо создать еще один объект. Конструктор BlobBuilder() возвращает объект BlobBuilder, предлагающий следующие методы:

— getBlob(type). Возвращает содержимое объекта BlobBuilder в форме бинарного блока. С помощью этого метода удобно создавать бинарные блоки для метода write();

— append(data). Присоединяет значение параметра data к объекту BlobBuilder. Атрибут data может представлять собой бинарный блок, объект ArrayBuffer или простой текст.

В HTML-документ из листинга 12.17 мы добавили второе поле, в которое нужно будет вводить текст, представляющий собой содержимое файла. Будем использовать код из данного листинга для примеров далее в этой главе.

Листинг 12.17. Шаблон для определения имени файла и его содержимого

<!DOCTYPE html>

<html lang="ru">

<head>

<title>Файловый API</title>

<link rel="stylesheet" href="file. css">

<script src="file. js"></script>

</head>

<body>

<section id="formbox">

<form name="form">

<p>Файл:<br><input type="text" name="myentry" id="myentry" required></p>

<p>TeKCT:<br><textarea name="mytext" id="mytext" required> </textarea></p> < p><input type="button" name="fbutton" id="fbutton" value="Выполнить"></p>

</form>

</section>

<section id="databox">

Информация недоступна </section>

</body>

</html>

Для выполнения операции записи откроем файловую систему, извлечем ссылку на файл или создадим новый с помощью getFile() и вставим в открытый файл предоставленные пользователем значения. Будем пользоваться двумя разными функциями: writefile() и writecontent().

Для того чтобы вам было проще учиться, мы постарались не делать файл излишне сложным. Однако вы всегда можете прибегнуть к помощи анонимных функций, если хотите ограничить контекст (поместить все внутрь одной функции), или воспользоваться возможностями объектно-ориентированного программирования для создания более продвинутых и масштабируемых реализаций.

Function initiate(){

Databox=document. getElementById(‘databox’); var button=document. getElementById(‘fbutton’); button. addEventListener(‘click’, writefile, false); window. webkitRequestFileSystem(window. PERSISTENT, 5*1024*1024, createhd, showerror);

}

Function createhd(fs){ hd=fs. root;

}

Function showerror(e){ alert(‘Ошибка: ‘+e. code);

}

Function writefile(){

Var name=document. getElementById(‘myentry’).value; hd. getFile(name, {create: true,

Exclusive: false},function(entry){ entry. createWriter(writecontent, showerror);

}, showerror);

}

Function writecontent(fileWriter) {

Var text=document. getElementById(‘mytext’).value; fileWriter. onwriteend=success; var blob=new WebKitBlobBuilder(); blob. append(text); fileWriter. write(blob. getBlob());

}

Function success(){

Document. getElementById(‘myentry’).value=»;

Document. getElementById(‘mytext’).value=»;

Databox. innerHTML=’Готово!’;

}

Window. addEventListener(‘load’, initiate, false);

Так же, как в случае с методом requestFileSystem(), в текущей реализации Google Chrome с конструктором BlobBuilder() необходимо использовать браузерный префикс. Для тестирования кода в браузере в этом и последующих примерах данный конструктор следует записывать как WebKitBlobBuilder().

Когда пользователь щелкает на кнопке Выполнить, информация из полей отправляется на обработку функциям writefile() и writecontent(). Функция writefile() принимает значение myentry и с помощью getFile() открывает или создает файл. Возвращенный ею объект Entry используется в методе createWriter() для создания объекта FileWriter. Если операция завершается успешно, происходит вызов функции writecontent().

Функция writecontent() принимает объект FileWriter и записывает в файл значение из поля mytext. Для того чтобы текст можно было использовать в операции записи, сначала его следует преобразовать в бинарный блок. Для этого мы применяем конструктор BlobBuilder(). Создаем объект BlobBuilder, добавляем текст к этому объекту, используя метод append(), и извлекаем содержимое в форме бинарного блока с помощью getBlob(). Это дает нам информацию в формате, подходящем для записи в файл посредством метода write().

Весь процесс выполняется асинхронно, то есть о статусе операции нам непрерывно сообщают события. В функции writecontent() мы прослушиваем только событие writeend (используя обработчик события onwriteend). В случае успеха вызываем функцию success() и выводим на экране строку «Готово!». Можно также контролировать прогресс выполнения задачи или проверять ошибки, прослушивая остальные события, предоставляемые объектом FileWriter.

Скопируйте шаблон из листинга 12.17 в новый HTML-файл (для этого шаблона можно использовать CSS-стили, которые мы создали ранее в листинге 12.2). Создайте JavaScript-файл с именем file. js и поместите в него код из листинга 12.18. Откройте HTML-документ в своем браузере, укажите имя файла и текст, который хотели бы в него вставить. Если на экране появится строка «Готово!», значит, операция была выполнена успешно.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *