Чтение и обработка файлов через FileReader API
Веб-браузеры, поддерживающие FileReader и <input type=”file”>, позволяют пользователям загружать файлы.
В этом мануале вы познакомитесь с API-интерфейсами File, FileReader и FileReaderSync.
Требования
- Не помешает базовое понимание методов JavaScript, EventListener и промисов.
- Редактор кода.
- Современный веб-браузер, поддерживающий File, FileReader и FileReaderSync.
Загрузка файла
Чтобы получить файл от пользователя, нам нужно использовать элемент <input>:
Этот код позволяет пользователям загружать файлы со своих машин.
Вот пример загрузки файла с помощью HTML-свойства <form>:
Для большего контроля обработчик загрузок вы можете использовать JavaScript вместо HTML <form>:
В этом подходе используются FormData и fetch.
Свойства Blob интерфейса File
В современных браузерах интерфейс File предлагает свойства и функции Blob. Эти функции позволяют нам читать файл.
- .text() преобразует файл в поток, а затем в строку.
- .stream() возвращает ReadableStream.
- .arrayBuffer() возвращает ArrayBuffer, который содержит данные большого двоичного объекта в двоичной форме.
- .slice() позволяет получать срезы файла.
Создайте новый файл myFile.txt с таким текстом:
Затем создайте новый файл file-blob-example.html и поместите в него:
Откройте file-blob-example.html в своем веб-браузере и добавьте myFile.txt во входные данные. В консоли веб-разработчика можно посмотреть, как с помощью .text(), .stream(), .buffer() и .slice() считывается содержимое файла.
Жизненный цикл и методы интерфейса FileReader
К FileReader прикреплено 6 основных событий:
- loadstart: срабатывает, когда мы начинаем загрузку файла.
- progress: срабатывает при чтении большого двоичного объекта в памяти.
- abort: срабатывает при вызове .abort.
- error: запускается при возникновении ошибки.
- load: запускается, если чтение прошло успешно.
- loadend: срабатывает, когда файл загружается, а error или abort не вызывается или load начинает новую операцию чтения.
Чтобы начать загрузку файла, у нас есть четыре метода:
- readAsArrayBuffer(file): читает файл или большой двоичный объект как массив ArrayBuffer. Один из вариантов использования – отправка больших файлов рабочему процессу сервиса.
- readAsBinaryString(file): читает файл как двоичную строку.
- readAsText(file, format): читает файл как USVString (почти как строку); здесь вы можете дополнительно указать формат.
- readAsDataURL(file): возвращает URL-адрес, по которому вы можете получить доступ к содержимому файла, он закодирован в Base64 и готов к отправке на ваш сервер.
Создайте новый файл filereader-example.html и поместите в него код, который использует метод readAsDataURL():
Откройте filereader-example.html в своем веб-браузере и добавьте файл myFile.txt в input. На экране появится индикатор выполнения, визуализирующий процесс обработки файла. Если загрузка прошла успешно, появится сообщение Start Loading, затем Loaded и Finished Loading.
Использование интерфейса FileReaderSync
FileReader – это асинхронный API, который не будет блокировать основной поток при чтении файлов (мы же не хотим, чтобы наш пользовательский интерфейс переставал работать, когда браузер пытается прочитать очень большой файл). Однако существует синхронная версия FileReader под названием FileReaderSync. Использовать FileReaderSync можно только в Web Workers. У веб-воркеров есть собственный поток, поэтому они не блокируют основной поток. FileReaderSync использует те же методы, что и FileReader:
- FileReaderSync.readAsArrayBuffer()
- FileReaderSync.readAsBinaryString()
- FileReaderSync.readAsText()
- FileReaderSync.readAsDataURL()
Обработчиков событий здесь нет, потому что это синхронный интерфейс.
Заключение
В этой статье вы познакомились с API-интерфейсами File, FileReader и FileReaderSync.
Не забудьте проверить поддержку этих функций браузерами, которые использует ваша целевая аудитория, чтобы убедиться, что пользователи смогут использовать ваше приложение.
Работа с файлами в JavaScript
При всем бурном развитии web, и стандартов html в частности, работа с файлами, практически никогда не менялась. К счастью, с приходом HTML5 и связанных с ним API, сейчас у нас гораздо больше возможностей для работы с файлами, чем когда-либо в предыдущих версиях браузеров (iOS до сих пор нет поддержки File API).
Тип Файл — File
Тип File определен в спецификации File API и является абстрактным представлением файла. Каждый экземпляр File имеет следующие свойства: name — имя файлаtype — MIME тип файла
Объект типа File дает важную информацию о файле, не предоставляя прямой доступ к содержимому файла. Он является лишь ссылкой на файл, и получение данных из этого файла является отдельным процессом в целом.
Получение ссылок на файлы
Разумеется, доступ к пользовательским файлам строго запрещен в Интернете, потому как очевидны проблемы с безопасностью личных данных. Вы не хотели бы, чтобы Вы загружали веб-страницу, а затем она сканировала Ваш жесткий диск и выясняла, что там есть полезного. Нужно разрешение от пользователя, чтобы получить доступ к файлам с его компьютера. Тем не менее для веб-страниц чтения файлов разрешено каждый раз, когда пользователь решат что-то загрузить.Когда вы используете элемент <input type=»file»>, Вы даете веб странице (и серверу) разрешение на доступ к файлу. Так, что первое, как вы можете получить объект File, это поле <input type=»file»>.
HTML5 определяет файловые ссылки для всех <input type=»file»> управления. Эта коллекция FileList, которая представляет собой структуру в виде массива под названием FileList содержащую объекты типа File для каждого выбранного файла в поле <input type=»file»> (помните, HTML5 позволяет выбрать несколько файлов в этом элементе управления). Так что в любой момент времени, Вы можете получить доступ к файлам пользователя, которые он выбрал, с помощью кода вроде этого:
Этот сравнительно простой код ожидает событие изменения в контроле(<input type=»file»> ). Когда событие происходит, это означает, что выбор файла изменился, и код перебирает все объекты типа File и выводит информацию из них. Имейте в виду, что свойство файлов всегда доступны из JavaScript, так что вам не придется ждать следующего изменения, чтобы попытаться сделать что-то другое с ними.
Drag and drop файлов
Доступ к файлам из формы по средствам контролов по-прежнему требует действий пользователей: нахождение и выбора интересующего файла. К счастью, HTML5 Drag and Drop предоставляет еще один способ для пользователей, чтобы предоставить доступ к своим файлам: путем простого перетаскивания файлов с рабочего стола в веб-браузер. Все, что вам нужно сделать, чтобы это реализовать отслеживать два события.
Для того, чтобы читать файлы, которые упали на элемент страницы, вы должны отслеживать события DragOver и Drop, и отменять действия по умолчанию, в обоих. Это говорит браузеру, что вы знаете, что делаете 🙂 и отменяет стандартные действия в таких случаях. Например, когда Вы перетаскиваете на страницу файл изображения, стандартным действием в таком случае будет открытие этого файла в этой вкладке. Это действие нужно отменить.
event.dataTransfer.files другой FileList объект, через который вы можете получить доступ, к информации о файлах. Код почти такой же, как и контролами формы и объекты типа File могут быть доступны таким же образом.
AJAX pагрузка файлов
Если у вас есть ссылка на файл, то вы сможете сделать очень удобную вещь: загрузить файл с помощью Ajax. Все это возможно благодаря объекту FormData, которая определен в XMLHttpRequest . Этот объект представляет собой HTML-форму и позволяет добавлять пары ключ-значение, которые будут переданы на сервер с помощью метода append():
Самое замечательное в объекте FormData, что вы можете добавить файл непосредственно к нему, фактически имитируя загрузку файла через HTML-форму. Все, что вам нужно сделать, это добавить в файл ссылки с определенным именем, и браузер сделает все остальное. Для примера:
Как только объект FormData передается в send (), надлежащие к его содержимому HTTP заголовки устанавливаются автоматически. Вам не нужно беспокоиться об установке правильной кодировки формы при использовании файлов, сервер будет работать с полученными файлами, так как если бы была отправлена обычная HTML форма , читая данные о присланном файле из $_FILES[‘photo’] и текстовыt данных из $_POST[‘name’]. Это дает вам универсальность, чтобы написать код обработки на стороне сервера, который может легко работать как с традиционными HTML-формами так и с формами присланными через Ajax.
И все это работает на последней версии большинства браузеров, включая Internet Explorer 10. К сожалению Internet Explorer 9 этого пока не поддерживает.
Что дальше
Теперь вы знаете два способа доступа к информации о файле в браузере: через контрол формы и через нативный ‘drag and drop’. Вероятно, появятся и другие способы доступа к файлам в будущем, но сейчас Вам нужно знать только эти два. Конечно, читать информацию о файлах, это только часть проблемы.Следующим шагом будет чтение данных из этих файлов, об этом и напишу во второй части статьи.
Ссылки по теме:
Часть 2: FileReader
В моем предыдущем посте, я затронул тему использования файлов в JavaScript, с особым акцентом на том, как получить доступ к объектам File. Эти объекты, содержащие блок метаданных, можно получить только тогда, когда пользователь либо собирается загрузить файл через контрол формы или перетаскивает его методом Drag&Drop на веб-страницу. Итак у Вас есть эти метаданные, следующим шагом является чтение данных из них.
Тип FileReader
FileReader имеет одно назначение: чтение данных из файла и сохранение их в переменной JavaScript. API намеренно разработан так, чтобы быть похожим на XMLHttpRequest, так как оба, по сути являются методом загрузки данных из внешних (вне браузера) ресурсов.Чтение осуществляется асинхронно, чтобы не блокировать браузер.
Есть несколько форматов, в которые FileReader может представлять данные из файла, формат должен быть задан, когда файл открывается для чтения. Чтение осуществляется с помощью вызова одного из следующих методов:
- readAsText — возвращает содержимое файла как plain text
- readAsBinaryString — возвращает содержимое файла в виде строки закодированных двоичных данных (устарело — вместо него используйте readAsArrayBuffer)
- readAsArrayBuffer — возвращает содержимое файла как ArrayBuffer (хорошо для двоичных данных, например, изображения)
- readAsDataURL — возвращает содержимое файла как data URL
Каждый из этих методов инициирует чтение файла и похож на метод send () объекта XHR, инициирующий HTTP запрос. Таким образом, вы должны установить обработчик загрузки событие onload, прежде чем начать читать. Результат чтения всегда представлены как event.target.result. Например:
Этот пример просто читает содержимое файла и выводит его в виде обычного текста в консоль. Обработчик события onload вызывается, когда файл успешно прочитан в то время, как OnError вызывается, если файл не был прочитан по каким-то причинам. Объект типа FileReader доступен внутри обработчика события через event.target. В случае успеха чтения данных, в поле result, будет содержимое файла, иначе информацию об ошибках.
Чтение в data URIs
Вы можете использовать тот же код для чтения в data URI. Data URI (иногда называемый data URLs) представляют собой интересный вариант, если вы хотите, например, вывести изображение только, что прочтенное с диска. Вы можете сделать это, используя следующий код:
Этот код просто вставляет изображение, которое было прочитано с диска на страницу. Поскольку data URI содержит все изображения, оно может быть передано непосредственно в атрибут src тега <img> и отображено на странице. Как альтернативу данному методу, Вы могли бы , загружать изображение и рисовать его на <canvas>:
Этот код загружает изображение в новый объект Image, а затем использует его, чтобы сделать изображение на Canvas’е (с указанием ширины и высоты 100). Data URIs , как правило, используются для этой цели, но может быть использован на любом другом типе файлов. Наиболее распространенный вариант использования для чтения файлов в data URI для отображения содержимого файлов сразу на веб-странице.
Чтение в ArrayBuffers
Тип ArrayBuffer впервые был введен как часть WebGL. ArrayBuffer представляет собой конечное число байтов, которые могут быть использованы для хранения данных любого размера. Данные, которые записываются в ArrayBuffer являются типизированным массивом, и не могут содержать разнотипные данные, так как это могут делать традиционные JavaScript массивы.
Вы можете использовать ArrayBuffer в первую очередь при работе с бинарными файлами, чтобы иметь более точный контроль над данными. Вы можете передать ArrayBuffer непосредственно в метод send () объекта XHR для передачи исходных данных на сервер (на стороне сервера, данные принимаются и обрабатываются, как двоичные данные ).
Что дальше
Читать данные из файла с помощью FileReader довольно просто. Если вы знаете, как использовать XMLHttpRequest, то чтение данных из файлов для Вас далось также легко. В следующей части этой серии, вы узнаете больше об использовании событий FileReader и возможных ошибках.
Ссылки по теме:
Часть 3: Событие прогресса и ошибки
Объект FileReader используется для чтения данных из файлов, которые доступны через браузер. В моей предыдущей статье вы узнали, как используя объект FileReader читать данные из файла в различных форматах. FileReader во многом очень похож на XMLHttpRequest.
Событие прогресса (Progress events)
События показывающее прогресс какого-либо процесса очень распространены. Эти события спроектированы для отображения прогресса передачи данных. Такая передача происходит как при запросе данных с сервера, так и при запросе данных с диска, что FileReader и делает.
Есть шесть событий прогресса:
- loadstart — указывает что процесс загрузки данных начался. Это событие всегда срабатывает первым
- progress — срабатывает несколько раз по мере загрузки данных, дает доступ к промежуточным данным
- error — срабатывает когда загрузка окончилась неудачей
- abort — срабатывает когда загрузка данных была отменена вызовом метода abort() (такой метод есть и у XMLHttpRequest).
- load — срабатывает только тогда, когда все данные были успешно загружены
- loadend — срабатывает, когда объект завершил передачу данных. Всегда срабатывает после error, abort или load.
Два события, error и load, были обсуждены в моем предыдущем посте. Другие события дают более узкий контроль над процессом передачи данных.
Отслеживание прогресса
Когда вы хотите отследить прогресс чтения файлов, используйте событие progress. Объект event который является параметром этого события содержит 3 поля, для контроля передаваемых данных
- lengthComputable — тип boolean указывает может ли браузер определить размер файла
- loaded — число байтов которые уже загружены
- total — общее количество байтов которые нужно прочитать
Эти данные позволяют создать прогресс бар, который будет показывать информацию от прогрессе загрузки . Например, вы можете использовать элемент HTML5 <progress> для мониторинга прогресса чтения файла. Вы можете связать уровень прогресса с фактическими данными, используя следующий код:
Это похоже на подход, который использует Gmail при реализации «drag and drop» загрузки файла, где вы видите прогрессбар сразу после добавления файла к электронному письму. Этот прогрессбар показывает, насколько файл уже передан на сервер.
Работа с ошибками
Даже если Вы читате локальный файл, это может привести к краху чтения. Спецификация File API определяет 4 типа ошибок:
- NotFoundError — файл не может быть найден.
- SecurityError — чтение файла не безопасно либо запрещено. Если файл слишком большой то Вы тоже увидите эту ошибку.
- NotReadableError — файл существует, но не может быть прочитан, скорее всего, из-за проблемы с правами доступа.
- EncodingError — возникает к примеру когда читаете файл как dataURI и длинна его выходит за пределы поддерживаемые браузером
При возникновении ошибки во время чтения файла, полю объекта FileReader error присваивается экземпляр одной из вышеупомянутых ошибок. По крайней мере, именно так написано в спецификации. На самом деле, браузеры реализовывают это как объект FileError, который имеет поле код, указывающий тип ошибки, которая произошла. Каждый тип ошибки представляет собой целочисленную константу:
- FileError.ABORT_ERR когда вызван abort() в процессе чтения файла.
Вы можете проверить тип ошибки либо во время события error или во время события loadend:
Что дальше
Объект FileReader это полнофункциональный объект с большим количеством методов сходных с методами XMLHttpRequest. из прошлых постов, Вы должны уметь считывать данные из файла с помощью JavaScript и отправлять данные на сервер, если это необходимо. Тем не менее, экосистема File API гораздо больше, чем описано в этой серии статей, и в следующей части вы узнаете о новых мощных функциях, предназначенных для работы с файлами.
Чтение файлов на JavaScript вообще штука интересная, Вы можете сохранить данные на карту памяти SD/SDHC/SecureDigital любых объемов? а затем прочитать их при помощи этого же FileAPI, что несомненно очень удобно. С учетом того, что онлайн приложенияразвиваются семимильными шагами покупаем карту SD SDHC в каком нибудьSotMarket и экспериментируем с чтением файла через JavaScript FileAPI уже сейчас.
Ссылки по теме
Часть 4: Объект URL
Ранее в блоге в серии Вы узнали, как использовать файлы традиционным путем. Вы можете загрузить файлы на сервер, и Вы можете читать содержимое файла с диска. Это наиболее распространенный способ работы с файлами. Тем не менее, это совершенно новый метод, может упростить некоторые общие задачи. Новый способ заключается в использовании объекта URL.
Что такое объект URL?
Объект Url — это адрес (идентификатор), который указывают на файл на диске. Предположим, что Вы хотите вывести изображение с из диска пользователя на веб-страницу. Сервер ничего не должен знать о файле, поэтому нет необходимости загружать его туда. Вы просто хотите отобразить файл в странице. Можно, как показано в предыдущих постах, получить ссылку на объект File, считать данные в data URI, а затем назначить data URI обычному <img>. Но думаю, это не лучший подход: образ уже существует на диске, читать изображения в другой формат для того, чтобы использовать его? Если вы создаете объект URL, вы можете связать его с <img> и тот получит доступ к этому локальному файлу напрямую.
Как это работает?
File API определяет глобальный объект, называемый URL, который имеет два метода. Первый createObjectURL(), который принимает ссылку на файл и возвращает объект URL. Это позволяет браузеру управлять через URL локальным файлом. Второй способ revokeObjectURL (), который указывает браузеру, как уничтожить URL, который передается в него, фактически освобождая память. Конечно, все объекты URL уничтожаются, как только веб-страницы выгружается, но хорошей практикой будет освободить их, когда они больше не нужны.
Поддержки объекта URL, как и для других частей File API, не так хороша. На момент написания поста, Internet Explorer, Firefox, поддерживают глобальный объект URL. Chrome поддерживает его в форме webkitURL в то время как Safari и Опера не имеют поддержки.
Пример использования
Вывести изображение, которое пользователь выбрал на веб страницу:
В примере объявляется переменная URL, которая совмещает различные реализации браузеров. Предполагая, что URL поддерживается браузером, код продолжает создавать объект URL прямо из файла и сохраняет его в ImageUrl. Новый элемент <img> создается и на обработчик события onload, вешается уничтожение объекта URL (подробнее об этом чуть позже). Затем, поле src изображения связывается с URL и элемент добавляется в страницу(это не обязательно, можно использовать уже существующий на странице элемент <img>).
Почему мы уничтожили объект URL после загрузки изображения? После загрузки изображения, URL больше не нужен, если вы не собираетесь использовать его с другим элементом. В этом примере, изображение загружается в один элемент, и после того, как изображение было полностью загружены, URL не несет никакой полезной цели. Самое время, чтобы освободить память, связанную с ним.
Безопасность и другие факторы
На первый взгляд, это возможность немного опасна. Вы загружаете файл непосредственно с компьютера пользователя через URL. Однако URL сам по себе не является большой проблемой безопасности, потому что это URL-адрес, который назначается динамически в браузере и был бы бесполезен на любом другом компьютере. А как насчет кросс-домменного использования?
File API запрещает использование объекта URL из разных доменов. Когда объект URL создан, он связан со страницей, в которой выполняется JavaScript, поэтому вы не можете использовать объект URL из www.wrox.com на странице p2p.wrox.com. Тем не менее, две страницы из www.wrox.com, где одна из них встроена в другую при помощи iframe, способны обмениваться объектами URL. Объект URL, существует лишь постольку, поскольку документ, в котором он был создан открыт. Когда документ выгружается, все URL объекты уничтожаются. Таким образом, не имеет смысла хранить объект URL на стороне клиента для дальнейшего использования, он являются бесполезным после того, как страница была выгружена. Вы можете использовать объект URL везде, где браузер создает GET запрос, это изображения, сскрипты, web workers, таблиц стилей, audio, и video. Вы не сможете использовать объект URL при POST запросе.
Что дальше?
Возможность создания URL ссылающихся непосредственно на локальный файлам является мощным инструментом. Вместо того, чтобы читать локальный файл в JavaScript для того, чтобы отобразить его на странице, вы можете просто создать URL и указать элементу страницы использовать его, как адрес. Этот процесс значительно упрощает использование локальных файлов на странице. Тем не менее, удовольствие от работы с файлами в JavaScript только начинается. В следующей статье Вы узнаете некоторые интересные способы работы с данными из файла.
Самый первый способ применения, который лезет в голову это загрузка аватара на страницу. Очень удобно будет выбирать себе аву, редактировать ее, а лишь потом отсылать на сервер. Таким образом вы повысите юзабилити своего ресурса, после этого повыситься посещаемость, которая перерастет в новых клиентов. Однако перед этим, советую провести seo аудит сайта, дабы выяснить каким-образом он индексируется поисковыми системами.
FileSystem API&File API: разбираемся и используем
В данной статье я хочу рассмотреть FileSystem API и File API, разобраться с его методами и показать пару полезных штук. Эта статья является компиляцией материалов с html5rocks (1, 2, 3). Все представленные ниже демки можно посмотреть по первым двум ссылкам. Третья ссылка так же предлагает ряд интересных демо. Ну а теперь займемся изучением материала.
В качестве введения
С помощью FileSystem API и File API веб приложение может создавать, читать, просматривать и записывать файлы находящиеся в области пользовательской «песочницы».
- Чтение и управление файлами: File/Blob, FileList, FileReader
- Создание и запись: BlobBuilder, FileWriter
- Работа с директориями и права доступа: DirectoryReader, FileEntry/DirectoryEntry, LocalFileSystem
- File — собственно файл; позволяет получить такую доступную только для чтения информацию, как имя, размер, mimetype и прочее.
- FileList — «массив» объектов File.
- Blob — сущность, позволяющая разбирать файл по байтам.
Поддержка браузерами и ограничение на хранение
На момент написания статьи только Google Chrome 9+ имеет рабочую реализацию FileSystem API. И на данный момент пока нет никаких диалоговых окон для управления файлами и квотами на хранилище, поэтому нужно будет использовать флаг —unlimited-quota-for-files (в случае разработки приложений для Chrome Web Store будет достаточно манифеста с разрешением unlimitedStorage). Но все меняется и пользователи в скором времени получат возможность для управления правами по работе с файлами, которые будут требоваться приложению.
Вам может потребоваться использование флага —allow-file-access-from-files , если вы дебажите приложение с использованием file://. Если этот флаг не использовать, то будут выброшены исключения типа SECURITY_ERR или QUOTA_EXCEEDED_ERR.
Обращаемся к файловой системе
Проверим поддержку браузером нужных нам функций
Веб приложение может обратиться к файловой системе (естественно в ограниченной «песочнице») вызвав следующий метод window.requestFileSystem():
Если вы вызываете метод requestFileSystem() в рамках вашего приложения в первый раз, то в этот момент и будет создано хранилище. Очень важно помнить, что данное хранилище является закрытым и другое приложение не будет иметь к нему доступа. Это так же значит, что приложение не может менять прочие файлы и папки, расположенные на жестком диске.
Спецификация по FileSystem так же описывает API для синхронной работы, а именно интерфейс LocalFileSystemSync, который предполагается использовать совместно Web Workers. Но в этой статье данное API не будет рассмотрено.
Возвращаясь к методу requestFileSystem() стоит описать возможные варианты возникающих ошибок:
Описанный пример очень прост, но по сути является заготовкой для дальнейшей работы с возникающими ошибками.
Работа с файлам
Для работы с файлам предусмотрен интерфейс FileEntry. Он обладает рядом методов и свойств, которые мы привыкли ассоциировать с обычными файлами. Приведем их ниже:
Разберем на примерах азы работы с FileEntry.
Создание файла
Получить или создать файл можно с помощью метода getFile() у интерфейса DirectoryEntry. После обращения к хранилищу, callback возвращает нам объект FileSystem, содержащий в себе DirectoryEntry (fs.root), ссылающийся на корневую папку хранилища.
Следующий код создаст пустой файл «log.txt»:
Итак, после обращения к файловому хранилищу, у нас в руках оказывается FileSystem. Внутри сallback-функции мы можем обратится к методу fs.root.getFile(), передав имя файла, который требуется создать. Можно передать как относительный, так и абсолютный путь — главное чтобы он был верным. Например, ошибочным будет создание файла, если его родительская папка не существует. Вторым аргументом метода getFile() является объект, описывающий параметры объекта, которые будут к нему применены, если он еще не создан. Более подробно можно прочитать в документации.
Чтение файла по имени
Следующий код обращается к файлу «log.txt» и читает его содержимое с помощью FileReader API, после чего записывает все содержимое в блок <textarea>. Если файл не существует, то будет выброшена ошибка.
- FileReader.readAsBinaryString(Blob|File) — результат будет содержать байтовую строку.
- FileReader.readAsText(Blob|File, opt_encoding) — результат будет содержать текстовую строку. Кодировка по умолчанию — ‘UTF-8’, менять можно с помощью задания опционального параметра
- FileReader.readAsDataURL(Blob|File) — на выходе имеем data URL.
- FileReader.readAsArrayBuffer(Blob|File) — получаем данные в виде ArrayBuffer.
Иногда нам может потребоваться не весь файл, а лишь его часть, для этого удобно использовать File.slice(start_byte,length).
Выглядит это так:
В следующем примере мы сможем прочитать либо нужные на байты, либо весь файл целиком. Особое внимание обратите на onloadend и evt.target.readyState, которые в данном случае будут заменять нам событие onload. (О событиях чуть ниже).
- onloadstart
- onprogress
- onload,
- onabort
- onerror
- onloadend
Запись в файл
С помощью следующего кода мы создадим файл «log.txt» (если он не существует) и запишем в него ‘Ipsum Lorem’.
Как видно, мы обращаемся к методу createWriter() для получения объекта. Кроме этого, мы обрабатываем события окончания записи в файл и возможного создания ошибки.
Дописываем данные в файл
Следующий код допишет ‘Hello World’ в конец файла. Если файла нет, то выброситься ошибка.
Создание копий выбранных файлов
Следующий код позволяет пользователю выбирать несколько файлов, используя <input type=«file» multiple> и создает копии этих файлов.
Для упрощения выбора файлов можно использовать HTML5 Drag and Drop.
Удаление файлов
Следующий код удалит ‘log.txt’.
Работа с директориями
Работа с директориями осуществляется за счет использования DirectoryEntry, который обладает большинством свойств FileEntry ( они оба наследуют интерфейс Entry). Перечислим ниже свойства и методы DirectoryEntry.
Создание директорий
Для создания и обращения к директориям используется getDirectory() интерфейса DirectoryEntry. Можно передавать как имя, так и путь до директории.
Создадим в корне директорию «MyPictures»:
Поддиректории
Создание поддиректорий по сути то же самое, что и создание директорий, однако надо помнить, что если родительская директория не существует, то будет выброшена ошибка. Следующий код показывает, как можно обойти это ограничение:
Теперь у нас создана директория «music/genres/jazz» и мы можем обращаться к любому ее уровню и создавать в них новые файлы. Например:
Разбираем содержимое директории
Чтобы узнать, что содержится в директории нужно создать DirectoryReader и вызвать его метод readEntries(), но при этом нет гарантии, что вернется все содержимое выбранной директории (. ). Это значит, что надо обращаться к методу DirectoryReader.readEntries(), пока результат не станет пустым. Пример:
Удаляем директорию
Для удаления следует вызвать метод DirectoryEntry.remove(). Важно знать, что если попытаться удалить не пустую директорию, то будет выброшена ошибка.
Удалим пустую директорию «jazz» из «/music/genres/»:
Рекурсивно удаляем директории
Если у вас есть не пустая директория и вы все же хотите ее удалить, то вам поможет метод removeRecursively(), который удалить и директорию и все ее содержимое.
Произведем эту операцию с директорией «music»:
Копируем, переименовываем и перемещаем
FileEntry и DirectoryEntry полностью идентичны в этом аспекте.
Копируем
И FileEntry и DirectoryEntry имеют метод copyTo() для копирования. В случае директорий, метод рекурсивно создаст и все содержимое.
Скопируем «me.png» из одной директории в другую:
Перемещение или переименование
У FileEntry и DirectoryEntry есть метод moveTo(), позволяющие перемещать и переименовывать файлы и директории. Первым аргументом является родительская папка, вторым (опциональным) параметром является новое имя.
Переименуем «me.png» в «you.png»:
Переместим «me.png» из корневой директории в «newfolder».
Use Cases
HTML5 предлагает несколько вариантов локального хранения данных, но FileSystem отличается тем, что позволяет удовлетворить те потребности, которые не удовлетворяют базы данных. В основном, это нужды приложение, которые хранят большой объем бинарных данных и/или предоставляет доступ к файлам приложениям вне браузера.