Как прочитать файл js
Перейти к содержимому

Как прочитать файл js

  • автор:

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 .

    как прочитать файл 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() .

    Чтение файлов в JavaScript

    Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

    Как выбирать файлы, читать метаданные и содержимое файлов, а также отслеживать ход чтения.

    Кейси Баски
    Пит ЛеПейдж
    Томас Штайнер

    Выбор файлов на локальном устройстве пользователя и взаимодействие с ними — одна из наиболее часто используемых функций Интернета. Он позволяет пользователям выбирать файлы и загружать их на сервер, например, загружать фотографии или отправлять налоговые документы и т. д. Но он также позволяет сайтам читать их и манипулировать ими без необходимости передавать данные по сети.

    Современный API доступа к файловой системе

    API доступа к файловой системе предоставляет простой способ чтения и записи файлов и каталогов в локальной системе пользователя. В настоящее время он доступен в большинстве браузеров на базе Chromium, таких как Chrome или Edge. Дополнительную информацию об этом см. в статье API доступа к файловой системе .

    Поскольку API доступа к файловой системе пока совместим не со всеми браузерами, ознакомьтесь с браузером-fs-access , вспомогательной библиотекой, которая использует новый API везде, где он доступен, но возвращается к устаревшим подходам, когда это не так.

    Работа с файлами классический способ

    В этом руководстве показано, как:

    • Выбрать файлы
      • Использование элемента ввода HTML
      • Использование зоны перетаскивания

      Выбрать файлы

      HTML-элемент ввода

      Самый простой способ выбрать файлы — использовать элемент , который поддерживается всеми основными браузерами. При нажатии он позволяет пользователю выбрать файл или несколько файлов, если включен атрибут multiple , используя встроенный пользовательский интерфейс выбора файлов своей операционной системы. Когда пользователь завершает выбор файла или файлов, срабатывает событие change элемента. Вы можете получить доступ к списку файлов из event.target.files , который является объектом FileList . Каждый элемент в FileList является объектом File .

          

      Примечание. Проверьте, является ли метод window.showOpenFilePicker() жизнеспособной альтернативой для вашего варианта использования, поскольку он также дает вам дескриптор файла, поэтому вы можете, помимо чтения, выполнить обратную запись в файл. Этот метод может быть полифиллом .

      В этом примере пользователь может выбрать несколько файлов с помощью встроенного пользовательского интерфейса выбора файлов своей операционной системы, а затем записать каждый выбранный файл на консоль.

      Ограничьте типы файлов, которые пользователи могут выбирать

      В некоторых случаях вам может потребоваться ограничить типы файлов, которые могут выбирать пользователи. Например, приложение для редактирования изображений должно принимать только изображения, а не текстовые файлы. Для этого добавьте атрибут accept к элементу ввода, чтобы указать, какие типы файлов принимаются.

      Пользовательское перетаскивание

      В некоторых браузерах элемент также является целью перетаскивания, позволяя пользователям перетаскивать файлы в ваше приложение. Но цель перетаскивания мала, и ее может быть сложно использовать. Вместо этого, предоставив основные функции с помощью элемента , вы можете предоставить большую настраиваемую поверхность для перетаскивания.

      Примечание. Проверьте, является ли метод DataTransferItem.getAsFileSystemHandle() жизнеспособной альтернативой для вашего варианта использования, поскольку он также дает вам дескриптор файла, поэтому вы можете, помимо чтения, выполнить обратную запись в файл.

      Выберите зону высадки

      Поверхность падения зависит от конструкции вашего приложения. Вы можете захотеть, чтобы только часть окна была поверхностью падения или, возможно, все окно.

      Скриншот Squoosh, веб-приложения для сжатия изображений.

      Squoosh позволяет пользователю перетаскивать изображение в любое место окна, а нажатие кнопки выбора изображения вызывает элемент . Что бы вы ни выбрали в качестве зоны перетаскивания, убедитесь, что пользователю понятно, что он может перетаскивать файлы на эту поверхность.

      Определите зону сброса

      Чтобы сделать элемент зоной перетаскивания, вам необходимо прослушивать два события: dragover и drop . Событие dragover обновляет пользовательский интерфейс браузера, чтобы визуально указать, что действие перетаскивания создает копию файла. Событие drop запускается после того, как пользователь бросает файлы на поверхность. Как и в случае с элементом input, вы можете получить доступ к списку файлов из event.dataTransfer.files , который является объектом FileList . Каждый элемент в FileList является объектом File .

      const dropArea = document.getElementById('drop-area'); dropArea.addEventListener('dragover', (event) => < event.stopPropagation(); event.preventDefault(); // Style the drag-and-drop as a "copy file" operation. event.dataTransfer.dropEffect = 'copy'; >); dropArea.addEventListener('drop', (event) => < event.stopPropagation(); event.preventDefault(); const fileList = event.dataTransfer.files; console.log(fileList); >); 

      event.stopPropagation() и event.preventDefault() останавливают поведение браузера по умолчанию и вместо этого позволяют запускать ваш код. Без них браузер в противном случае ушел бы с вашей страницы и открыл бы файлы, которые пользователь поместил в окно браузера.

      Ознакомьтесь с функцией «Пользовательское перетаскивание» для демонстрации в реальном времени.

      А что насчет каталогов?

      К сожалению, сегодня не существует хорошего способа доступа к каталогу.

      Атрибут webkitdirectory в элементе позволяет пользователю выбирать каталог или каталоги. Он поддерживается в большинстве основных браузеров, за исключением Firefox для Android.

      Примечание. Проверьте, является ли метод window.showDirectoryPicker() жизнеспособной альтернативой для вашего варианта использования, поскольку он также дает вам дескриптор каталога, поэтому вы можете, помимо чтения, выполнять обратную запись в каталог. Этот метод может быть полифиллом .

      Если перетаскивание включено, пользователь может попытаться перетащить каталог в зону перетаскивания. Когда событие drop запускается, оно включает объект File для каталога, но не обеспечивает доступ ни к одному из файлов в каталоге.

      Чтение метаданных файла

      Объект File содержит метаданные о файле. Большинство браузеров предоставляют имя файла, размер файла и тип MIME, хотя в зависимости от платформы разные браузеры могут предоставлять разную или дополнительную информацию.

      function getMetadataForFileList(fileList) < for (const file of fileList) < // Not supported in Safari for iOS. const name = file.name ? file.name : 'NOT SUPPORTED'; // Not supported in Firefox for Android or Opera for Android. const type = file.type ? file.type : 'NOT SUPPORTED'; // Unknown cross-browser support. const size = file.size ? file.size : 'NOT SUPPORTED'; console.log(); > > 

      Вы можете увидеть это в действии в демо input-type-file .

      Чтение содержимого файла

      Чтобы прочитать файл, используйте FileReader , который позволяет вам читать содержимое объекта File в память. Вы можете указать FileReader читать файл как буфер массива , URL-адрес данных или текст .

      function readImage(file) < // Check if the file is an image. if (file.type && !file.type.startsWith('image/')) < console.log('File is not an image.', file.type, file); return; >const reader = new FileReader(); reader.addEventListener('load', (event) => < img.src = event.target.result; >); reader.readAsDataURL(file); > 

      В приведенном выше примере считывается File предоставленный пользователем, затем преобразуется его в URL-адрес данных и используется этот URL-адрес данных для отображения изображения в элементе img . Посмотрите демонстрацию read-image-file , чтобы узнать, как проверить, что пользователь выбрал файл изображения.

      Следите за ходом чтения файла

      При чтении больших файлов может быть полезно предоставить некоторый пользовательский интерфейс, чтобы указать, насколько далеко продвинулось чтение. Для этого используйте событие progress , предоставляемое FileReader . Событие progress предоставляет два свойства: loaded (прочитанное количество) и total (объем для чтения).

      function readFile(file) < const reader = new FileReader(); reader.addEventListener('load', (event) =>< const result = event.target.result; // Do something with result >); reader.addEventListener('progress', (event) => < if (event.loaded && event.total) < const percent = (event.loaded / event.total) * 100; console.log(`Progress: $`); > >); reader.readAsDataURL(file); > 

      Изображение героя Винсента Ботты из Unsplash

      Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.

      Последнее обновление: 2010-06-18 UTC.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *