Настало время попробовать считать то, что мы только что записали в файл, применяя техники из основной спецификации файлового API, которые мы изучили в начале главы. Для чтения и извлечения содержимого файла мы будем пользоваться конструктором FileReader() и методами считывания, такими как readAsText().
Function initiate(){
Databox=document. getElementById(‘databox’); var button=document. getElementById(‘fbutton’); button. addEventListener(‘click’, readfile, false);
Window. webkitRequestFileSystem(window. PERSISTENT, 5*1024*1024, createhd, showerror);
}
Function createhd(fs){ hd=fs. root;
}
Function showerror(e){ alert(‘Ошибка: ‘+e. code);
}
Function readfile(){
Var name=document. getElementById(‘myentry’).value; hd. getFile(name, {create: false}, function(entry) { entry. file(readcontent, showerror);
}, showerror);
}
Function readcontent(file){
Databox. innerHTML=’Имя: ‘+file. name+'<br>’; databox. innerHTML+=’Тип: ‘+file. type+'<br>’; databox. innerHTML+=’Размер: ‘+file. size+’ bytes<br>’;
Var reader=new FileReader(); reader. onload=success; reader. readAsText(file);
}
Function success(e){
Var result=e. target. result; document. getElementById(‘myentry’).value=»; databox. innerHTML+^Содержимое: ‘+result;
}
Window. addEventListener(‘load’, initiate, false);
Методы, предоставляемые интерфейсом FileReader для считывания содержимого файла, такие как readAsText(), принимают в качестве атрибута бинарный блок или объект File. Объект File представляет собой считываемый файл и генерируется элементом <input> или операцией перетаскивания. Как уже говорилось, в интерфейсе FileEntry
Предусмотрена возможность создавать объекты такого типа — для этого предназначен метод file().
Когда пользователь щелкает на кнопке Выполнить, функция readfile() принимает значение из поля myentry и открывает файл с указанным именем с помощью метода getFile(). Если метод выполняется успешно, то возвращается объект Entry. Он сохраняется в переменной entry и используется для генерирования объекта File в методе file().
Поскольку объект File — это точно такой же объект, как и генерируемый элементом <input> и операцией перетаскивания, мы можем использовать те же свойства, которые применяли раньше. Например, мы вполне можем показать основную информацию о файле еще до того, как начнется его считывание. Мы выводим на экран значения базовых свойств и считываем содержимое файла в функции readcontent().
Процесс считывания аналогичен тому, который закодирован в листинге 12.3. Объект FileReader создается с помощью конструктора FileReader(), и мы регистрируем обработчик события onload, для того чтобы в случае успешного завершения он вызывал функцию success(). Непосредственное считывание содержимого файла происходит в методе readAsText().
В функции success(), вместо того чтобы показывать на экране строку, как мы делали раньше, отображаем содержимое файла. Для этого считываем значение свойства result объекта FileReader и выводим его в объекте databox.
Код из листинга 12.20 принимает только одно значение — из поля myentry. Откройте HTML-файл с последним шаблоном в своем браузере и введите в поле название файла, который нужно прочитать. Это должен быть файл, который вы создали ранее, в противном случае система вернет сообщение об ошибке (create: false). Если имя файла указано правильно, то вы увидите на экране информацию о файле и его содержимое.
Добавить комментарий