В моем предыдущем посте, я затронул тему использования файлов в 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. Например:

var reader = new FileReader();
reader.onload = function(event) {
    var contents = event.target.result;
    console.log("Содержимое файла: " + contents);
};

reader.onerror = function(event) {
    console.error("Файл не может быть прочитан! код " + event.target.error.code);
};

reader.readAsText(file);

Этот пример просто читает содержимое файла и выводит его в виде обычного текста в консоль. Обработчик события onload  вызывается, когда файл успешно прочитан в то время, как OnError вызывается, если файл не был прочитан по каким-то причинам. Объект типа FileReader доступен внутри обработчика события через event.target. В случае успеха чтения данных, в поле result, будет содержимое файла, иначе информацию об ошибках.

Чтение в data URIs

Вы можете использовать тот же код для чтения в data URI. Data URI (иногда называемый data URLs) представляют собой интересный вариант, если вы хотите, например, вывести изображение только, что прочтенное с диска. Вы можете сделать это, используя следующий код:

var reader = new FileReader();
reader.onload = function(event) {
    var dataUri = event.target.result,
        img     = document.createElement("img");

    img.src = dataUri;
    document.body.appendChild(img);
};

reader.onerror = function(event) {
    console.error("Файл не может быть прочитан! код " + event.target.error.code);
};

reader.readAsDataURL(file);

Этот код просто вставляет изображение, которое было прочитано с диска на страницу. Поскольку data URI содержит все изображения, оно может быть передано непосредственно в атрибут src тега  <img> и отображено на странице. Как альтернативу данному методу, Вы могли бы , загружать изображение и рисовать его на <canvas>:

var reader = new FileReader();
reader.onload = function(event) {
    var dataUri = event.target.result,
        context = document.getElementById("mycanvas").getContext("2d"),
        img     = new Image();

    // ждать, пока изображение не будет полностью обработано
    img.onload = function() {
        context.drawImage(img, 100, 100);
    };
    img.src = dataUri;
};

reader.onerror = function(event) {
    console.error("Файл не может быть прочитан! код " + event.target.error.code);
};

reader.readAsDataURL(file);

Этот код загружает изображение в новый объект Image, а затем использует его, чтобы сделать изображение на Canvas'е (с указанием  ширины и высоты  100).

Data URIs , как правило, используются для этой цели, но может быть использован на любом другом типе файлов. Наиболее распространенный вариант использования для чтения файлов в data URI  для отображения содержимого файлов сразу на веб-странице.

Чтение в ArrayBuffers

Тип ArrayBuffer впервые был введен как часть WebGL. ArrayBuffer представляет собой конечное число байтов, которые могут быть использованы для хранения данных любого размера. Данные, которые записываются в ArrayBuffer являются типизированным массивом, и не могут содержать разнотипные данные, так как это могут делать традиционные JavaScript массивы. 

Вы можете использовать ArrayBuffer в первую очередь при работе с бинарными файлами, чтобы иметь более точный контроль над данными.  Вы можете передать ArrayBuffer непосредственно в метод send ()  объекта XHR для передачи исходных данных на сервер (на стороне сервера, данные принимаются и обрабатываются, как двоичные данные ).

Что дальше

Читать данные из файла с помощью FileReader довольно просто. Если вы знаете, как использовать XMLHttpRequest, то чтение данных из файлов для Вас далось также легко. В следующей части этой серии, вы узнаете больше об использовании событий  FileReader  и возможных ошибках.

Ссылки по теме:

ArrayBuffer
Спецификация по типизированным массивам
XMLHttpRequest Level 2

Связанные статьи

Работа с файлами в JavaScript, Часть 1: Основы
Работа с файлами в JavaScript, Часть 3:Событие прогресса и ошибки
Работа с файлами в JavaScript, Часть 4:Объект URL

Оригинал статьи: http://www.nczonline.net/blog/2012/05/15/working-with-files-in-javascript-part-2/

Оставлять комментарии могут только зарегистрированные пользователи

Комментарии  

Spirit
# Spirit 29.11.2012 23:16
Это дело бы еще под IE запустить, было бы просто замечательно
Leroy
# Leroy 30.11.2012 13:03
в ie10 все работает, так что не за горами))
IVAN
# IVAN 05.02.2015 17:50
плохая статья! машинный перевод
не очень хорошие люди вы
Valeriy Chupurnov
# Valeriy Chupurnov 05.02.2015 17:57
где-то есть неточности? или не поняли сути?
СергейЗ
# СергейЗ 12.07.2015 18:10
Не понял один момент. Берем первый пример с кодом. Почему reader.onload стоит перед reader.readAsDataURL(file)? По сути-то нам сначала надо подучить dataURL, мне кажется это логичным. На забугорных сайтах попадалось что-то со временем загрузки связанное, но толком и не понял.
Можете подробнее разжевать почему такой порядок в этой функции?
СергейЗ
# СергейЗ 12.07.2015 18:12
Цитирую СергейЗ:
Не понял один момент. Берем первый пример с кодом. Почему reader.onload стоит перед reader.readAsDataURL(file)? По сути-то нам сначала надо подучить dataURL, мне кажется это логичным. На забугорных сайтах попадалось что-то со временем загрузки связанное, но толком и не понял.
Можете подробнее разжевать почему такой порядок в этой функции?

Ошибся. Во-втором примере с кодом.
profxtrader.ru
# profxtrader.ru 26.02.2020 08:10
программирую роботов
Имеет смысл узнать подробнее
о правилах технического анализа
можно в моем блоге.