Js прочитать текстовый файл
Мнение о том, что JavaScript не умеет взаимодействовать с файловой системой, является не совсем верным. Скорее, речь идет о том, что это взаимодействие существенно ограничено по сравнению с серверными языками программирования, такими как Node.js или PHP. Тем не менее, JavaScript умеет как получать (принимать), так и создавать некоторые типы файлов и успешно обрабатывать их нативными средствами.
В этой статье мы создадим три небольших проекта:
- Реализуем получение и обработку изображений, аудио, видео и текста в формате txt и pdf
- Создадим генератор JSON-файлов
- Напишем две программы: одна будет формировать вопросы (в формате JSON), а другая использовать их для создания теста
FileReader
FileReader объект, цель которого читать данные из Blob (и, следовательно, из File тоже).
Данные передаются при помощи событий, так как чтение с диска может занять время.
- readAsArrayBuffer(blob) – считать данные как ArrayBuffer
- readAsText(blob, [encoding]) – считать данные как строку (кодировка по умолчанию: utf-8 )
- readAsDataURL(blob) – считать данные как base64-кодированный URL.
- abort() – отменить операцию.
Выбор метода для чтения зависит от того, какой формат мы предпочитаем, как мы хотим далее использовать данные.
- readAsArrayBuffer – для бинарных файлов, для низкоуровневой побайтовой работы с бинарными данными. Для высокоуровневых операций у File есть свои методы, унаследованные от Blob , например, slice , мы можем вызвать их напрямую.
- readAsText – для текстовых файлов, когда мы хотим получить строку.
- readAsDataURL – когда мы хотим использовать данные в src для img или другого тега. Есть альтернатива – можно не читать файл, а вызвать URL.createObjectURL(file) , детали в главе Blob.
В процессе чтения происходят следующие события:
- loadstart – чтение начато.
- progress – срабатывает во время чтения данных.
- load – нет ошибок, чтение окончено.
- abort – вызван abort() .
- error – произошла ошибка.
- loadend – чтение завершено (успешно или нет).
Когда чтение закончено, мы сможем получить доступ к его результату следующим образом:
- reader.result результат чтения (если оно успешно)
- reader.error объект ошибки (при неудаче).
Наиболее часто используемые события – это, конечно же, load и error .
Вот пример чтения файла:
Как упоминалось в главе Blob, FileReader работает для любых объектов Blob, а не только для файлов.
Поэтому мы можем использовать его для преобразования Blob в другой формат:
- readAsArrayBuffer(blob) – в ArrayBuffer ,
- readAsText(blob, [encoding]) – в строку (альтернатива TextDecoder ),
- readAsDataURL(blob) – в формат base64-кодированного URL.
Для веб-воркеров доступен синхронный вариант FileReader , именуемый FileReaderSync.
Его методы считывания read* не генерируют события, а возвращают результат, как это делают обычные функции.
Но это только внутри веб-воркера, поскольку задержки в синхронных вызовах, которые возможны при чтении из файла, в веб-воркерах менее важны. Они не влияют на страницу.
22 Answers 22
And specify file:// in your filename:
try to put file:///User/Danny/Desktop/javascriptWork/testing.txt in your browser's url bar and see if you can see the file..
it doesn't need to be an absolute path.. this worked for me just fine: readTextFile('Properties/version.txt'); thanks!
This won't work in Chrome (possiblity other browsers) you will get "Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource."
After the introduction of fetch api in javascript, reading file contents could not be simpler.
reading a text file
reading a json file
Получаем и обрабатываем файлы
Для начала создадим директорию, в которой будут храниться наши проекты. Назовем ее «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 определяем конкретную функцию обработки файла:
Объект File наследуется от объекта Blob и обладает возможностями по взаимодействию с файловой системой.
Есть два способа его получить.
Во-первых, есть конструктор, похожий на Blob :
- fileParts – массив значений Blob / BufferSource /строки.
- fileName – имя файла, строка.
- options – необязательный объект со свойством:
- lastModified – дата последнего изменения в формате таймстамп (целое число).
Во-вторых, чаще всего мы получаем файл из или через перетаскивание с помощью мыши, или из других интерфейсов браузера. В этом случае файл получает эту информацию из ОС.
Так как File наследует от Blob , у объектов File есть те же свойства плюс:
- name – имя файла,
- lastModified – таймстамп для даты последнего изменения.
В этом примере мы получаем объект File из :
Через можно выбрать несколько файлов, поэтому input.files – псевдомассив выбранных файлов. Здесь у нас только один файл, поэтому мы просто берём input.files[0] .
Update 30/07/2018 (disclaimer):
This technique works fine in Firefox, but it seems like Chrome's fetch implementation does not support file:/// URL scheme at the date of writing this update (tested in Chrome 68).
Итого
File объекты наследуют от Blob .
Помимо методов и свойств Blob , объекты File также имеют свойства name и lastModified плюс внутреннюю возможность чтения из файловой системы. Обычно мы получаем объекты File из пользовательского ввода, например, через или перетаскиванием с помощью мыши, в событии dragend .
Объекты FileReader могут читать из файла или Blob в одном из трёх форматов:
- Строка ( readAsText ).
- ArrayBuffer ( readAsArrayBuffer ).
- URL в формате base64 ( readAsDataURL ).
Однако, во многих случаях нам не нужно читать содержимое файла. Как и в случае с Blob, мы можем создать короткий URL с помощью URL.createObjectURL(file) и использовать его в теге или
. Таким образом, файл может быть загружен или показан в виде изображения, как часть canvas и т.д.
А ты сделай через php
открываеш файл
$fh = f o p e n ( " f i l e l . t x t " , " w " ) ;\открываеш файл
$line = f g e t s ( $ f h ) ;\Вытаскиваеш всё что нужно
или допустим считаеш все строчки из файла
while(ifeof($fh) )
<
$line = rtrim(fgets($fh));
echo "$line";
>
fclose($fh)Esca, используя javascript, файл можно будет получить только с этого же сайта на котором запускаете скрипт. Получить можно так (в скрипте 'file.txt' замените на адрес файла который вам нужен):
При загрузке страницы посылается ajax запрос к файлу, далее его содержимое записывается в переменную response, а потом содержимое переменной выводится на экран alert'ом.
Подробнее тут.Код который написала девушка работает только в IE. Этот код позволяет работать с локальной файловой системой через ActiveX.
К сожалению я не знаю какие методы надо использовать чтоб прочитать текстовый файл.
Открываете через IE (проверялось на 11 версии), запрашивает разрешение ActiveX, разрешаете.
Считывает данные из Диска С, папка Time, файл info.txt
И выводит в текстовый блок filecontents.Мне интересно другое - как бы записать в этот текстовый документ данные, Javascript'ом? Создать и записать туда - получается, а если я хочу просто открыть и записать? Вот это конечно да.
У меня произошло озарение!
А вот и возможно! Тех кто писал выше, что это невозможно - проклинаю 10 раз!
Делюсь двумя вариантами с комментариями.
Первый - высвечивает текстовый блок, в котором ты забиваешь что-нибудь, и скрипт "дописывает" в существующий файл.
Второй - считывает из файла, и высвечивает в текстблок. Ты там редактируешь, нажимаешь "Дописать", он заменяет файл с текстом из текстблока
function readfile()
var fso,filehandle,contents;
fso = new ActiveXObject("Scripting.FileSystemObject");
filehandle = fso.OpenTextFile("C:\\Time\\info.txt",1);/* Открывает файл*/
contents = filehandle.ReadAll(); /* Читает из файла и переменная contents и есть весь текст, который он считал*/
if (contents) document.all("filecontents").value = contents; /* Вставляет в текстбокс filecontents текст contents*/
filehandle.close();/* Закрывает файл*/
>function WriteToFile()
var fso = new ActiveXObject('Scripting.FileSystemObject');
var s = fso.CreateTextFile("C:\\Time\\info.txt", true); /* перезаписывает файл, открывает для редактирования*/
var second = document.getElementById("filecontents").value; /* Читает из текстбокса filecontents и переменная second и есть весь текст, который он считал*/
s.WriteLine (second); /* записывает весь текст из переменной second, имитирует Enter*/
s.Close(); /*закрывает файл*/
>
I’m trying to write a simple text file reader by creating a function that takes in the file’s path and converts each line of text into a char array, but it’s not working.
What is going wrong here?
I’ve tested this on Firefox and it works, but in Google Chrome it just won’t work and it keeps giving me an Exception 101. How can I get this to work on not just Firefox, but also on other browsers (especially Chrome)?
@JeffreySweeney yes I'm testing this on a local machine. I have stored the text file at the same place as the javascripts and html
Получаем и обрабатываем файлы
Для начала создадим директорию, в которой будут храниться наши проекты. Назовем ее «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 определяем конкретную функцию обработки файла:Объект File наследуется от объекта Blob и обладает возможностями по взаимодействию с файловой системой.
Есть два способа его получить.
Во-первых, есть конструктор, похожий на Blob :
- fileParts – массив значений Blob / BufferSource /строки.
- fileName – имя файла, строка.
- options – необязательный объект со свойством:
- lastModified – дата последнего изменения в формате таймстамп (целое число).
Во-вторых, чаще всего мы получаем файл из или через перетаскивание с помощью мыши, или из других интерфейсов браузера. В этом случае файл получает эту информацию из ОС.
Так как File наследует от Blob , у объектов File есть те же свойства плюс:
- name – имя файла,
- lastModified – таймстамп для даты последнего изменения.
В этом примере мы получаем объект File из :
Через можно выбрать несколько файлов, поэтому input.files – псевдомассив выбранных файлов. Здесь у нас только один файл, поэтому мы просто берём input.files[0] .
Update-2 (disclaimer):
But how can you use the text and put it into a string variable for use elsewhere? (I keep on getting 'undefined' no matter what I do to it.)
@not2qubit fetching a text file is an async operation. You are getting undefined because you are using the variable before the file is completely read. You have to use it inside the promise callback or use something like javascript "async await" operators.
Fetch API cannot load file:///C:/Users/path/to/file/file.txt. URL scheme must be "http" or "https" for CORS request.
same here stupid Chrome 68. I can't believe this is a hot topic, thanks @AbdelazizMokhnache keep us informed. JAK. I just tested File-Save.js, it works, and I want something simple to read the file back (basically save/restore my settings to a file of my choice)
Visit Javascripture ! And go the section readAsText and try the example. You will be able to know how the readAsText function of FileReader works.
Links are nice, but you should "always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline." See How do I write a good answer.
This example deals with a user-input text file, but I think the question was about a file that's local to the server.
@S.Kirby As said by the OP in response to a question about if it's run locally or on a remote server: it's all local. all in one folder nothing else.. Besides, other people (like me) might have the question about how to do it locally.
I'm not sure this answers this 4 year old question. The OP isn't uploading documents, they are trying to read the text file in the same directory from a path. And if you're going to answer questions this old at least write a short summary of why you think your answer is now better than the others or how the language has changed since the question to warrant a new answer.
Using my own existing file upload input html - copying the lines from var reader = new FileReader(); through reader.readAsBinaryString(..) - it reads the contents of my text file. Clean, elegant, works like a charm. Best answer in this thread for me - thanks!
Yes JS can read local files (see FileReader()) but not automatically: the user has to pass the file or a list of files to the script with an html .
Then with JS it is possible to process (example view) the file or the list of files, some of their properties and the file or files content.
What JS cannot do for security reasons is to access automatically (without the user input) to the filesystem of his computer.
To allow JS to access to the local fs automatically is needed to create not an html file with JS inside it but an hta document.
В этой небольшой статье я хочу рассказать вам о File System Access API (далее — FSA ), позволяющем читать и записывать файлы в локальную систему пользователя с помощью браузера.
Если вам это интересно, прошу под кат.
Поддержка
К сожалению, на сегодняшний день FSA поддерживается только 34.68% браузеров: сюда входят все десктопные браузеры, за исключением Firefox .
Возможности
FSA расширяет объект window следующими методами:
- showOpenFilePicker — для чтения файлов;
- showSaveFilePicker — для записи файлов;
- showDirectoryPicker — для чтения директории.
Данные методы называются фабриками дескрипторов локальной файловой системы (local file system handle factories) и возвращают FileSystemHandle — сущность (entity) для работы с файлами ( FileSystemFileHandle ) или директориями ( FileSystemDirectoryHandle ), соответственно.
FileSystemHandle содержит поле kind (вид, тип), значением которого может быть либо file , либо directory , и поле name (название файла или директории).
Чтение файла
Для получения сущности для чтения файла ( FileSystemFileHandle ) используется метод showOpenFilePicker :
Общими для showOpenFilePicker и showSaveFilePicker являются настройки:
- types?: object — разрешенные типы файлов;
- excludeAcceptAllOption?: boolean — если имеет значение true , picker будет принимать/сохранять только файлы с типами, определенными в types .
Значением поля types является объект со следующими свойствами:
- description?: string — описание типа файлов;
- accept?: object — объект вида < MIME-тип: расширение >.
Специфичной для showOpenFilePicker настройкой является multiple?: boolean — если имеет значение true , picker будет принимать несколько файлов и возвращать массив FileSystemFileHandle .
Для чтения содержимого файла с помощью FileSystemFileHandle используется метод getFile :
getFile возвращает интерфейс File . Для преобразования blob в текст можно использовать метод text (данный метод наследуется File от интерфейса Blob ):
Предположим, что у нас имеется директория fsa-test , в которой лежит файл test.txt с текстом Hi World . Прочитаем этот файл.
Пользователь должен явно выразить намерение прочитать файл или директорию, например, нажать кнопку.
Нажимаем на кнопку. Выбираем файл test.txt . Получаем Hi World в консоли.
Создадим еще парочку файлов, например, test2.txt с текстом Bye World и test3.txt с текстом Hi World Once Again .
Прочитаем все 3 файла, запретив пользователю выбирать другие файлы.
Нажимаем на кнопку. Выбираем файлы test.txt , test2.txt и test3.txt . Получаем в консоли:
Запись файлов
Для получения сущности для записи файла ( FileSystemFileHandle ) используется метод showSaveFilePicker :
Специфичной для showSaveFilePicker является настройка suggestedName?: string — рекомендуемое название создаваемого файла.
Для записи файла с помощью FileSystemFileHandle используется метод createWritable :
Единственной доступной на сегодняшний день настройкой createWritable является keepExistingData?: boolean — если имеет значение true , picker сохраняет данные, имеющиеся в файле на момент записи, в противном случае, содержимое файла перезаписывается.
createWritable возвращает FileSystemWritableFileStream , предоставляющий метод write для записи файла:
fileData — это данные для записи.
Запишем файл test4.txt с текстом Bye World Once Again .
Нажимаем на кнопку File saver . Сохраняем файл. Видим, что в директории появился файл test4.txt с текстом Bye World Once Again .
Перезапишем содержимое файла test.txt .
Нажимаем на кнопку File picker . Выбираем файл test.txt . Нажимаем на кнопку File saver . Получаем уведомление о том, что браузер сможет манипулировать файлом test.txt до закрытия всех вкладок. Нажимаем Сохранить . Открываем test.txt . Видим, что текст Hi World изменился на Bye World (текст Hi World должен был сохраниться, поскольку мы указали настройку keepExistingData: true ).
Чтение директории
Для получения сущности для чтения директории ( FileSystemDirectoryHandle ) используется метод showDirectoryPicker :
Для перебора содержимого выбранной директории можно использовать следующие методы:
- entries — возвращает массив массивов вида [name, handle] , где name — название сущности, а handle — FileSystemHandle ;
- values — возвращает массив handle ;
- keys — возвращает массив name .
Переместим файлы test2.txt , test3.txt и test4.txt в директорию text и прочитаем содержимое директории fsa-test .
Структура директории fsa-test :
Нажимаем на кнопку Directory picker . Выбираем директорию fsa-test . Получаем уведомление о том, что наш сайт сможет просматривать файлы в выбранной директории. Нажимаем Просмотреть файлы . Получаем в консоли:
Для получения FileSystemFileHandle и FileSystemDirectoryHandle , находящихся внутри выбранной директории предназначены методы getFileHandle и getDirectoryHandle , соответственно. Обязательным параметром, принимаемым этими методами, является name — название файла/директории.
Прочитаем содержимое файла test.txt и директории text .
Нажимаем на кнопку Directory picker . Выбираем директорию fsa-test . Нажимаем Просмотреть файлы . Получаем в консоли:
getFileHandle и getDirectoryHandle также принимают настройку create?: boolean — если имеет значение true , запрашиваемый файл/директория создается при отсутствии:
Удаление файла/директории
Для удаления файла или директории предназначен метод FileSystemDirectoryHandle.removeEntry . Он принимает 2 параметра:
- name: string — название удаляемого файла/директории;
- options? — объект с настройками:
- recursive: boolean — если имеет значение true , удаляется сама директория и все ее содержимое (данная настройка позволяет удалять непустые директории).
Удалим файл test.txt и директорию text :
Нажимаем на кнопку Directory picker . Выбираем директорию fsa-test . Получаем сразу 2 уведомления от браузера. Предоставляем ему необходимые разрешения. Видим, что файл test.txt и директория text благополучно удаляются.
Как видите, FSA предоставляет в наше распоряжение довольно интересные возможности по работе с файлами и директориями, находящимися в локальной системе пользователя. Фактически он представляет собой урезанную версию модуля fs для браузера.
Полагаю, с ростом поддержки FSA найдет широкое применение в веб-разработке и станет прекрасным дополнением набора инструментов, включающих File API , input type="file" и Drag and drop API .
Пожалуй, это все, чем я хотел поделиться с вами в этой статье.
Обратите внимание: мы рассмотрели далеко не все возможности, предоставляемые FSA , поэтому рекомендую полистать спецификацию.
Читайте также: