Js прочитать текстовый файл
Обновлено: 06.07.2024
FileReader object позволяет веб-приложениям асинхронно читать содержимое файлов (или буферов необработанных данных), хранящихся на компьютере пользователя, используя объекты File или Blob для указания файла или данных для чтения. Один простой способ получить доступ к локальным файлам через Элемент формы HTML, который даст вам доступ только для чтения.
Файл (или Blob) может быть прочитан разными способами разными способами благодаря API FileReader:
Каждый метод ожидает файл в качестве первого параметра, чтобы извлечь файл (или файлы, если существует несколько атрибутов), выбрать элемент DOM и получить значение свойства files.
Замечания: это значение является массивом (FileList), поэтому вам нужно напрямую обращаться к файлу с индексом 0, если входной файл не кратен.
Чтение файлов
Как упоминалось ранее, FileReader позволяет вам читать файл различными методами. Каждый метод по-разному относится к тому, как вам будет возвращено содержимое, от простого текста до binaryData.
В этой статье вы узнаете, как использовать readAsText а также readAsDataURL методы правильно.
readAsText
readAsText Метод используется для чтения содержимого указанного файла (или BLOB-объекта). Когда операция чтения завершена, readyState изменяется на DONE , лоаденд срабатывает, а result Атрибут цели содержит содержимое файла в виде текстовой строки.
Этот метод ожидает в качестве параметра секунды (необязательно) кодификацию текста.
Используйте следующий фрагмент, чтобы получить текстовое содержимое файла:
Протестируйте предыдущий код в следующем фрагменте, он будет считывать содержимое файла с вашего компьютера, не связываясь с каким-либо сервером при выборе файла:
readAsDataURL
readAsDataURL Метод используется для чтения содержимого указанного файла (или BLOB-объекта). Когда операция чтения завершена, readyState становится DONE и loadEnd срабатывает. В то время атрибут результата цели содержит the data as a URL, представляющий данные файла в виде base64 закодированная строка.
Следующий код позволяет вам прочитать изображение с вашего устройства и преобразовать его в строку base64. Тогда это будет показано в теге img внутри div:
Поиграйте со следующей скрипкой и выберите файл для отображения в браузере:
Как видите, он фильтрует только изображения в формате png или jpg, используя простой фильтр с mimetype файла (вы можете фильтровать по его расширению, а не по mimetype вручную). ReadAsDataURL может использоваться, то есть для воспроизведения аудиофайла в видеотеге.
Мнение о том, что JavaScript не умеет взаимодействовать с файловой системой, является не совсем верным. Скорее, речь идет о том, что это взаимодействие существенно ограничено по сравнению с серверными языками программирования, такими как Node.js или PHP. Тем не менее, JavaScript умеет как получать (принимать), так и создавать некоторые типы файлов и успешно обрабатывать их нативными средствами.
В этой статье мы создадим три небольших проекта:
- Реализуем получение и обработку изображений, аудио, видео и текста в формате txt и pdf
- Создадим генератор JSON-файлов
- Напишем две программы: одна будет формировать вопросы (в формате JSON), а другая использовать их для создания теста
Получаем и обрабатываем файлы
Для начала создадим директорию, в которой будут храниться наши проекты. Назовем ее «Work-With-Files-in-JavaScript» или как Вам будет угодно.
В этой директории создадим папку для первого проекта. Назовем ее «File-Reader».
Создаем в ней файл «index.html» следующего содержания:
Здесь мы имеем контейнер-файлоприемник и инпут с типом «file» (для получения файла; мы будем работать с одиночными файлами; для получения нескольких файлов инпуту следует добавить атрибут «multiple»), который будет спрятан под контейнером.
Стили можно подключить отдельным файлом или в теге «style» внутри head:
Можете сделать дизайн по своему вкусу.
Не забываем подключить скрипт либо в head с атрибутом «defer» (нам нужно дождаться отрисовки (рендеринга) DOM; можно, конечно, сделать это в скрипте через обработку события «load» или «DOMContentLoaded» объекта «window», но defer намного короче), либо перед закрывающим тегом «body» (тогда не нужен ни атрибут, ни обработчик). Лично я предпочитаю первый вариант.
Откроем index.html в браузере:
Прежде чем переходить к написанию скрипта, следует подготовить файлы для приложения: нам потребуется изображение, аудио, видео, текст в формате txt, pdf и любом другом, например, doc. Можете использовать мою коллекцию или собрать свою.
Нам часто придется обращаться к объектам «document» и «document.body», а также несколько раз выводить результаты в консоль, поэтому предлагаю обернуть наш код в такое IIFE (это не обязательно):
Первым делом объявляем переменные для файлоприемника, инпута и файла (последний не инициализируем, поскольку его значение зависит от способа передачи — через клик по инпуту или бросание (drop) в файлоприемник):
Отключаем обработку событий «dragover» и «drop» браузером:
Для того, чтобы понять, зачем мы это сделали, попробуйте перенести изображение или другой файл в браузер и посмотрите, что произойдет. А происходит автоматическая обработка файлов, т.е. то, что мы собираемся реализовать самостоятельно в познавательных целях.
Обрабатываем бросание файла в файлоприемник:
Мы только что реализовали простейший механизм «dran'n'drop».
Обрабатываем клик по файлоприемнику (делегируем клик инпуту):
Приступаем к обработке файла:
Удаляем файлоприемник и инпут:
Способ обработки файла зависит от его типа:
Мы не будем работать с html, css и js-файлами, поэтому запрещаем их обработку:
Мы также не будем работать с MS-файлами (имеющими MIME-тип «application/msword», «application/vnd.ms-excel» и т.д.), поскольку их невозможно обработать нативными средствами. Все способы обработки таких файлов, предлагаемые на StackOverflow и других ресурсах, сводятся либо к конвертации в другие форматы с помощью различных библиотек, либо к использованию viewer'ов от Google и Microsoft, которые не хотят работать с файловой системой и localhost. Вместе с тем, тип pdf-файлов также начинается с «application», поэтому такие файлы мы будем обрабатывать отдельно:
Для остальных файлов получаем их «групповой» тип:
Посредством switch..case определяем конкретную функцию обработки файла:
JavaScript - долгое время не имел поддержки чтения файлов из компьютера пользователя. Оно и понятно, вряд ли кто-то захотел бы, чтобы при посещении сайта, какой-либо скрипт на странице мог произвольно читать из файловой системы компьютера, угрожая безопасности пользователя.
Однако, время идет, и потребность в чтении файлов из файловой системы ПК с учетом масштабного развития как браузеров, так самого JavaScript сделали свое - сегодня мы можем читать, с определенными ограничениями, файлы из ПК компьютера, при этом нам не обязательно нужен сервер - мы можем прочитать файл из жесткого диска, провести с данными из него какие либо операции и затем записать файл обратно.
Далее я Вам покажу, как можно прочитать текстовый файл из папки на ПК в JavaScript.
Код html:
JavaScript код:
// параметр e - объект файла из элемента выбора
function readFiles(e)
// если есть нужные объекты - то чтение файлов возможно
if (window.FileList && window.File)
const file = e.target.files[0];
// объект класса читающего файл
const reader = new FileReader();
// содержимое файла
let content = event.target.result;
// выводим содержимое в консоль построчно
console.log(rows);
>);
// читаем текстовый файл
reader.readAsText(file);
>
>
Вот можно прочитать файл с компьютера пользователя в JavaScript. Причем заметьте, что файлы можно читать не только текстовые, но и другие.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Я пытаюсь написать простую программу чтения текстовых файлов, создав функцию, которая принимает путь к файлу и преобразует каждую строку текста в массив символов, но это не работает.
Что здесь не так?
Это все еще не работает после небольшого изменения кода из предыдущей версии, и теперь он дает мне < > исключение 101.
Я проверил это на Firefox, и он работает, но в Google Chrome он просто не работает и продолжает давать мне исключение 101. Как я могу заставить это работать не только на Firefox, но и на других браузерах (особенно Chrome) ) ?
И укажите file:// в своем имени файла:
Вы можете импортировать мою библиотеку:
Тогда функция fetchfile(path) вернет загруженный файл
Обратите внимание: в Google Chrome, если HTML-код является локальным, будут появляться ошибки, но сохранение HTML-кода и файлов в сети, а затем запуск онлайн-файла HTML работает.
Другой пример - мой читатель с классом FileReader
Как читать локальный файл?
Используя это, вы загрузите файл с помощью loadText (), а затем JS будет асинхронно ждать, пока файл не будет прочитан и загружен, после чего он откроет функцию readText (), позволяющую вам продолжить работу с обычной логикой JS (вы также можете написать попытку try). блок функции loadText () в случае возникновения любой ошибки), но для этого примера я оставляю ее минимальной.
Да, js может читать локальные файлы (см. FileReader ()), но не автоматически: пользователь должен передать файл или список файлов в скрипт с помощью html <input type=file> .
Затем с помощью js можно обрабатывать (например, просмотр) файл или список файлов, некоторые их свойства и содержимое файла или файлов.
Что не может сделать js по соображениям безопасности, так это автоматически (без ввода пользователя) получить доступ к файловой системе своего компьютера.
Для автоматического доступа js к локальному fs необходимо создать не html-файл с js внутри, а htm-документ.
Файл hta может содержать внутри себя js или vbs.
Но исполняемый файл hta будет работать только на системах Windows.
Это стандартное поведение браузера.
Получить данные локального файла в js (data.js) load:
Файл data.js похож на:
Динамическое unixTime queryString предотвращает кэширование.
Локальные вызовы AJAX в Chrome не поддерживаются из-за политики того же источника.
Если вы проверите журналы консоли, вы найдете " Cross origin requests are not supported for protocol schemes: http, data, chrome, chrome-extension, https. "
Firefox не налагает такого ограничения, поэтому ваш код будет успешно работать на Firefox. Однако есть и обходные пути для Chrome: см. Здесь.
Добавив к некоторым ответам выше, это модифицированное решение работало для меня.
Читайте также: