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

Рассказать друзьям
author.jpg

Платная консультация по вопросам 2500 руб/час

Прочитали статью и остались вопросы? Меня зовут Валерий и я её автор. С радостью объясню Вам в скайпе все затруднительные моменты, которые остались за рамками статьи!

Подробнее ...

Комментарии   

Spirit
# Spirit 29.11.2012 23:16
Это дело бы еще под IE запустить, было бы просто замечательно
Сообщить модератору
Leroy
# Leroy 30.11.2012 13:03
в ie10 все работает, так что не за горами))
Сообщить модератору
IVAN
-5 # 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
программирую роботов
Имеет смысл узнать подробнее
о правилах технического анализа
можно в моем блоге.
Сообщить модератору
skribbl io
# skribbl io 25.06.2020 23:15
It's a shame you don't have a donate button! I'd certainly
donate to this superb blog! I guess for now i'll settle for book-marking and adding your RSS feed
to my Google account. I look forward to brand new
updates and will share this site with my Facebook group.
Chat soon!
Сообщить модератору
deeeep io
# deeeep io 26.06.2020 20:08
Because the admin of this website is working, no question very soon it will be famous, due to its
quality contents.
Сообщить модератору
elvenar
# elvenar 27.06.2020 00:13
This paragraph is really a nice one it helps new net viewers, who are wishing for
blogging.
Сообщить модератору
moomoo io
# moomoo io 27.06.2020 11:17
Fantastic items from you, man. I have remember
your stuff prior to and you are simply too magnificent.
I actually like what you've received right here, really like what you are stating and the way in which in which
you are saying it. You are making it entertaining and you still care for to keep it smart.
I cant wait to read much more from you. That is really a wonderful website.
Сообщить модератору
play game
# play game 29.06.2020 15:29
I am in fact glad to read this weblog posts which contains lots of helpful facts, thanks
for providing such statistics.
Сообщить модератору
deeeep io
# deeeep io 02.07.2020 16:25
I'm gone to inform my little brother, that he
should also visit this weblog on regular basis to get updated from newest gossip.
Сообщить модератору
skribbl io
# skribbl io 03.07.2020 05:40
Great article.
Сообщить модератору
skribbl.io
# skribbl.io 03.07.2020 17:39
Excellent web site you've got here.. It's difficult to find excellent writing
like yours these days. I honestly appreciate people like you!
Take care!!
Сообщить модератору
moomoo.io
# moomoo.io 03.07.2020 22:19
Appreciating the dedication you put into your site and detailed
information you offer. It's great to come across a blog every
once in a while that isn't the same old rehashed information. Excellent read!

I've saved your site and I'm adding your RSS feeds to
my Google account.
Сообщить модератору
bubble spinner
# bubble spinner 04.07.2020 03:36
My partner and I stumbled over here different web
address and thought I might as well check things
out. I like what I see so i am just following you.
Look forward to looking over your web page again.
Сообщить модератору
bubble shooter
# bubble shooter 04.07.2020 05:55
Do you mind if I quote a few of your articles as long as I
provide credit and sources back to your webpage? My blog is in the very
same niche as yours and my visitors would genuinely benefit from some of the information you
present here. Please let me know if this okay with you. Cheers!
Сообщить модератору
moomoo io
# moomoo io 05.07.2020 03:27
I could not refrain from commenting. Perfectly written!
Сообщить модератору
defly io
# defly io 05.07.2020 05:36
Definitely believe that which you said. Your favorite justification seemed to be
on the net the easiest thing to be aware of. I say to you,
I certainly get irked while people consider worries that they plainly do not know about.
You managed to hit the nail upon the top and defined out the whole thing without having side effect , people could take a signal.
Will probably be back to get more. Thanks
Сообщить модератору
moomoo io
# moomoo io 05.07.2020 17:10
Excellent blog! Do you have any tips and hints for aspiring writers?
I'm hoping to start my own site soon but I'm a
little lost on everything. Would you advise starting with
a free platform like Wordpress or go for a paid option?
There are so many options out there that I'm totally confused ..
Any recommendations? Bless you!
Сообщить модератору
msn games
# msn games 05.07.2020 22:38
Genuinely no matter if someone doesn't be aware of afterward its
up to other viewers that they will help, so here it takes place.
Сообщить модератору
moto x3m
# moto x3m 05.07.2020 23:58
Hey this is somewhat of off topic but I was wondering
if blogs use WYSIWYG editors or if you have to manually code with HTML.
I'm starting a blog soon but have no coding knowledge so I wanted to get guidance from someone with experience.
Any help would be enormously appreciated!
Сообщить модератору
moomoo io
# moomoo io 06.07.2020 10:49
Hi there! I know this is somewhat off topic but I was
wondering if you knew where I could locate a captcha plugin for my comment form?
I'm using the same blog platform as yours and I'm having difficulty
finding one? Thanks a lot!
Сообщить модератору
elvenar
# elvenar 08.07.2020 01:48
Hi there, all the time i used to check blog posts here early in the dawn,
because i love to find out more and more.
Сообщить модератору