File и FileReader

Объект File наследуется от объекта Blob и обладает возможностями по взаимодействию с файловой системой.

Есть два способа его получить.

Во-первых, есть конструктор, похожий на Blob :

• fileParts – массив значений Blob / BufferSource /строки.
• fileName – имя файла, строка.
• options – необязательный объект со свойством:
  • lastModified – дата последнего изменения в формате таймстамп (целое число).

Во-вторых, чаще всего мы получаем файл из или через перетаскивание с помощью мыши, или из других интерфейсов браузера. В этом случае файл получает эту информацию из ОС.

Так как File наследует от Blob , у объектов File есть те же свойства плюс:

• name – имя файла,
• lastModified – таймстамп для даты последнего изменения.

В этом примере мы получаем объект File из :

Через можно выбрать несколько файлов, поэтому input.files – псевдомассив выбранных файлов. Здесь у нас только один файл, поэтому мы просто берём input.files[0] .

FileReader

FileReader объект, цель которого читать данные из Blob (и, следовательно, из File тоже).

Данные передаются при помощи событий, так как чтение с диска может занять время.

• readAsArrayBuffer(blob) – считать данные как ArrayBuffer
• readAsText(blob, [encoding]) – считать данные как строку (кодировка по умолчанию: utf-8 )
• readAsDataURL(blob) – считать данные как base64-кодированный URL.
• abort() – отменить операцию.

Выбор метода для чтения зависит от того, какой формат мы предпочитаем, как мы хотим далее использовать данные.

• readAsArrayBuffer – для бинарных файлов, для низкоуровневой побайтовой работы с бинарными данными. Для высокоуровневых операций у File есть свои методы, унаследованные от Blob , например, slice , мы можем вызвать их напрямую.
• readAsText – для текстовых файлов, когда мы хотим получить строку.
• readAsDataURL – когда мы хотим использовать данные в src для img или другого тега. Есть альтернатива – можно не читать файл, а вызвать URL.createObjectURL(file) , детали в главе Blob.

В процессе чтения происходят следующие события:

• loadstart – чтение начато.
• progress – срабатывает во время чтения данных.
• load – нет ошибок, чтение окончено.
• abort – вызван abort() .
• error – произошла ошибка.
• loadend – чтение завершено (успешно или нет).

Когда чтение закончено, мы сможем получить доступ к его результату следующим образом:

• reader.result результат чтения (если оно успешно)
• reader.error объект ошибки (при неудаче).

Наиболее часто используемые события – это, конечно же, load и error .

Работа с файлами в JavaScript

Часть 1: Основы

При всем бурном развитии web, и стандартов html в частности, работа с файлами, практически никогда не менялась. К счастью, с приходом HTML5 и связанных с ним API, сейчас у нас гораздо больше возможностей для работы с файлами, чем когда-либо в предыдущих версиях браузеров (iOS до сих пор нет поддержки File API).

Тип Файл — File

Тип File определен в спецификации File API и является абстрактным представлением файла. Каждый экземпляр File имеет следующие свойства: name — имя файлаtype — MIME тип файла

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

Получение ссылок на файлы

Разумеется, доступ к пользовательским файлам строго запрещен в Интернете, потому как очевидны проблемы с безопасностью личных данных. Вы не хотели бы, чтобы Вы загружали веб-страницу, а затем она сканировала Ваш жесткий диск и выясняла, что там есть полезного. Нужно разрешение от пользователя, чтобы получить доступ к файлам с его компьютера. Тем не менее для веб-страниц чтения файлов разрешено каждый раз, когда пользователь решат что-то загрузить.Когда вы используете элемент , Вы даете веб странице (и серверу) разрешение на доступ к файлу. Так, что первое, как вы можете получить объект File, это поле .

HTML5 определяет файловые ссылки для всех управления. Эта коллекция FileList, которая представляет собой структуру в виде массива под названием FileList содержащую объекты типа File для каждого выбранного файла в поле (помните, HTML5 позволяет выбрать несколько файлов в этом элементе управления). Так что в любой момент времени, Вы можете получить доступ к файлам пользователя, которые он выбрал, с помощью кода вроде этого:

Этот сравнительно простой код ожидает событие изменения в контроле( ). Когда событие происходит, это означает, что выбор файла изменился, и код перебирает все объекты типа 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 тега и отображено на странице. Как альтернативу данному методу, Вы могли бы , загружать изображение и рисовать его на :

Этот код загружает изображение в новый объект 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

для мониторинга прогресса чтения файла. Вы можете связать уровень прогресса с фактическими данными, используя следующий код:

Это похоже на подход, который использует 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 обычному . Но думаю, это не лучший подход: образ уже существует на диске, читать изображения в другой формат для того, чтобы использовать его? Если вы создаете объект URL, вы можете связать его с и тот получит доступ к этому локальному файлу напрямую.

Как это работает?

File API определяет глобальный объект, называемый URL, который имеет два метода. Первый createObjectURL(), который принимает ссылку на файл и возвращает объект URL. Это позволяет браузеру управлять через URL локальным файлом. Второй способ revokeObjectURL (), который указывает браузеру, как уничтожить URL, который передается в него, фактически освобождая память. Конечно, все объекты URL уничтожаются, как только веб-страницы выгружается, но хорошей практикой будет освободить их, когда они больше не нужны.

Поддержки объекта URL, как и для других частей File API, не так хороша. На момент написания поста, Internet Explorer, Firefox, поддерживают глобальный объект URL. Chrome поддерживает его в форме webkitURL в то время как Safari и Опера не имеют поддержки.

Пример использования

Вывести изображение, которое пользователь выбрал на веб страницу:

В примере объявляется переменная URL, которая совмещает различные реализации браузеров. Предполагая, что URL поддерживается браузером, код продолжает создавать объект URL прямо из файла и сохраняет его в ImageUrl. Новый элемент создается и на обработчик события onload, вешается уничтожение объекта URL (подробнее об этом чуть позже). Затем, поле src изображения связывается с URL и элемент добавляется в страницу(это не обязательно, можно использовать уже существующий на странице элемент ).

Почему мы уничтожили объект 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 аудит сайта, дабы выяснить каким-образом он индексируется поисковыми системами.