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

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

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Больше
1 год 2 нед. назад - 1 год 2 нед. назад #101 от roman
Пример кода ( Оригинал на сайте 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, будет содержимое файла, иначе информацию об ошибках.
Последнее редактирование: 1 год 2 нед. назад пользователем roman.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

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

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Больше
1 год 1 день назад #103 от roman
FileReader read file undefined result

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Время создания страницы: 0.120 секунд