В моем предыдущем посте, я затронул тему использования файлов в 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/
Комментарии
не очень хорошие люди вы
Можете подробнее разжевать почему такой порядок в этой функции?
Ошибся. Во-втором примере с кодом.
Имеет смысл узнать подробнее
о правилах технического анализа
можно в моем блоге.