Как прочитать локальный текстовый файл с помощью JavaScript?
HTML 5 предоставляет стандартный способ взаимодействия с локальными файлами с помощью File API . Файловый API позволяет взаимодействовать с одним, несколькими файлами, а также файлами BLOB. API FileReader можно использовать для асинхронного чтения файла в сотрудничестве с обработкой событий JavaScript. Однако не все браузеры поддерживают HTML 5, поэтому важно проверить совместимость браузера перед использованием File API. В API FileReader есть четыре встроенных метода для чтения локальных файлов:
• FileReader.readAsArrayBuffer(): считывает содержимое указанного входного файла. Атрибут результата содержит ArrayBuffer, представляющий данные файла.
• FileReader.readAsBinaryString(): считывает содержимое указанного входного файла. Атрибут результата содержит необработанные двоичные данные из файла в виде строки.
• FileReader.readAsDataURL(): считывает содержимое указанного входного файла. Атрибут результата содержит URL-адрес, представляющий данные файла.
• FileReader.readAsText(): считывает содержимое указанного входного файла. Атрибут результата содержит содержимое файла в виде текстовой строки. Этот метод может принимать версию кодировки в качестве второго аргумента (если требуется). Кодировка по умолчанию — UTF-8.
В этом случае мы используем метод FileReader.readAsText() для чтения локального файла .txt.
<html>
<head>
<meta charset="UTF-8">
<title>Чтение текстового файла</title>
</head>
<body>
<input type="file" name="inputfile" id="inputfile">
<br>
<pre id="output"></pre>
<script type="text/javascript">
document.getElementById('inputfile').addEventListener('change', function() {
var fr=new FileReader();
fr.onload=function(){
document.getElementById('output').textContent=fr.result;
}
fr.readAsText(this.files[0]);
})
</script>
</body>
</html>
Этот код выводит содержимое входного файла точно так же, как во входном файле.
JavaScript наиболее известен для разработки веб-страниц, но он также используется в различных небраузерных средах.
