File и FileReader
Объект File наследуется от объекта Blob и обладает возможностями по взаимодействию с файловой системой.
Есть два способа его получить.
Во-первых, есть конструктор, похожий на Blob :
new File(fileParts, fileName, [options])- fileParts – массив значений Blob / BufferSource /строки.
- fileName – имя файла, строка.
- options – необязательный объект со свойством:
- lastModified – дата последнего изменения в формате таймстамп (целое число).
Во-вторых, чаще всего мы получаем файл из или через перетаскивание с помощью мыши, или из других интерфейсов браузера. В этом случае файл получает эту информацию из ОС.
Так как File наследует от Blob , у объектов File есть те же свойства плюс:
- name – имя файла,
- lastModified – таймстамп для даты последнего изменения.
В этом примере мы получаем объект File из :
На заметку:
Через можно выбрать несколько файлов, поэтому input.files – псевдомассив выбранных файлов. Здесь у нас только один файл, поэтому мы просто берём input.files[0] .
FileReader
FileReader объект, цель которого читать данные из Blob (и, следовательно, из File тоже).
Данные передаются при помощи событий, так как чтение с диска может занять время.
let reader = new FileReader(); // без аргументов- 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 .
Вот пример чтения файла:
FileReader для Blob
Как упоминалось в главе Blob, FileReader работает для любых объектов Blob, а не только для файлов.
Поэтому мы можем использовать его для преобразования Blob в другой формат:
- readAsArrayBuffer(blob) – в ArrayBuffer ,
- readAsText(blob, [encoding]) – в строку (альтернатива TextDecoder ),
- readAsDataURL(blob) – в формат base64-кодированного URL.
Для Web Worker также доступен FileReaderSync
Для веб-воркеров доступен синхронный вариант FileReader , именуемый FileReaderSync.
Его методы считывания read* не генерируют события, а возвращают результат, как это делают обычные функции.
Но это только внутри веб-воркера, поскольку задержки в синхронных вызовах, которые возможны при чтении из файла, в веб-воркерах менее важны. Они не влияют на страницу.
Итого
File объекты наследуют от Blob .
Помимо методов и свойств Blob , объекты File также имеют свойства name и lastModified плюс внутреннюю возможность чтения из файловой системы. Обычно мы получаем объекты File из пользовательского ввода, например, через или перетаскиванием с помощью мыши, в событии dragend .
Объекты FileReader могут читать из файла или Blob в одном из трёх форматов:
- Строка ( readAsText ).
- ArrayBuffer ( readAsArrayBuffer ).
- URL в формате base64 ( readAsDataURL ).
Однако, во многих случаях нам не нужно читать содержимое файла. Как и в случае с Blob, мы можем создать короткий URL с помощью URL.createObjectURL(file) и использовать его в теге или
. Таким образом, файл может быть загружен или показан в виде изображения, как часть canvas и т.д.
А если мы собираемся отправить File по сети, то это также легко, поскольку в сетевые методы, такие как XMLHttpRequest или fetch , встроена возможность отсылки File .
Как считать текстовый файл с помощью Javascript?
Здравствуйте. Есть необходимость в обработке текстового файла построчно, например как это делается в C#. К сожалению, у меня мало времени для настройки сервера и я в этом не разбираюсь, поэтому PHP не вариант. Можно ли подобную работу провести в Javascript?
- Вопрос задан более трёх лет назад
- 7125 просмотров
2 комментария
Простой 2 комментария
На локальном компьютере?
Чтение локального файла средствами JavaScript
Здравствуйте!
Сразу прошу тапками не кидаться — честно гуглил, но адекватного ответа не нашел. Мне нужно считать указанный пользователем файл (с локальной машины конечно же) именно в JavaScript. Задача такая, а не моя фантазия. Вроде бы это можно сделать средствами HTML5 (File API), и кстати нормально так делается.
Но вездесущий IE как всегда все портит, а потому нужна альтернатива как минимум для него, ибо он File API до сих пор не поддерживает.
Конечно же, в идеале, нужна кроссбраузерная альтернатива, если такая имеется. Собственно в этом и весь вопрос к вам, знатоки. в альтернативе.Отслеживать
задан 27 мар 2013 в 16:53
494 1 1 золотой знак 4 4 серебряных знака 19 19 бронзовых знаков
без fileapi — только флэш/java. но я бы просто сделал — те кто fileapi поддерживают используют его, а те кто нет. по-старинке POST
27 мар 2013 в 17:15
Может, костыль: слать файл на свой сервер, и оттуда уже отдавать юзеру?
как прочитать файл node js
Как было упомянуто в вопросе данные из файла, для чтения файла в окружении Node.js используется модуль для работы с файловой системой fs и его метода readFile() :
const fs = require('fs'); fs.readFile('report.txt', 'utf8', (err, data) => if (err) throw err; console.log(data); >);В результате файл report.txt был полностью прочитан в кодировке utf8 , которую мы указали в качестве параметра при вызове метода readFile() .