Чтобы записать содержимое в файл, нужно создать объект 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-документ в своем браузере, укажите имя файла и текст, который хотели бы в него вставить. Если на экране появится строка «Готово!», значит, операция была выполнена успешно.
Добавить комментарий