Чтение локального файла средствами JavaScript

Рассмотрим вариант кода, который позволяет загрузить данные из файла (например, файл содержит блок данных), который расположен на локальной машине пользователя с помощью JavaScript.
Данную задачу можно решить средствами HTML5 (File API).
FileReader имеет одно назначение: чтение данных из файла и сохранение их в переменной JavaScript.
Чтение осуществляется с помощью вызова одного из следующих методов:
readAsText() – возвращает содержимое файла как plain text
readAsBinaryString() – возвращает содержимое файла в виде строки закодированных двоичных данных (устарело – вместо него используйте readAsArrayBuffer() )
readAsArrayBuffer() – возвращает содержимое файла как ArrayBuffer (хорошо для двоичных данных, например, изображения)
readAsDataURL() – возвращает содержимое файла как data URL
Результат чтения всегда представлены как event.target.result.

Пример кода (  Оригинал на сайте CodePen  ):<input type="file" id="file">
<button onclick="readFile(document.getElementById('file'))">Read!</button>
<div id="out"></div>

<script type="text/javascript">
function readFile(object) {
var file = object.files[0]
var reader = new FileReader()
reader.onload = function() {
document.getElementById('out').innerHTML = reader.result //или event.target.result
};
reader.onerror = function(event) {
console.error("Файл не может быть прочитан! код " + event.target.error.code);
};
reader.readAsText(file)
}
</script>
Этот пример просто читает содержимое файла и выводит его в виде обычного текста. Обработчик события onload вызывается, когда файл успешно прочитан в то время, как OnError вызывается, если файл не был прочитан по каким-то причинам. Объект типа FileReader доступен внутри обработчика события через event.target. В случае успеха чтения данных, в поле result, будет содержимое файла, иначе информацию об ошибках.

Метод readAsText() сбрасывает все содержимое файла в одну длинную строку, вставляемую в свойство e.target.result, которое в свою очередь отправляется событию onload.
Метод readAsText() работает должным образом только для текстового содержимого файла, но не для двоичного.