Файл и FileReader

Объект File наследуется от Blob и расширен возможностями, связанными с файловой системой.

Есть два способа получить его.

Во-первых, есть конструктор, похожий на Blob :

  новый файл (fileParts, fileName, [options])  

  • fileParts — это массив значений Blob/BufferSource/String.
  • fileName — строка имени файла.
  • options — необязательный объект:
    • lastModified — метка времени (целочисленная дата) последней модификации.

Во-вторых, чаще мы получаем файл из , перетаскивания или других интерфейсов браузера. В этом случае файл получает эту информацию от ОС.

Поскольку File наследуется от Blob , Объекты File имеют те же свойства, плюс:

  • name — имя файла,
  • lastModified — отметка времени последней модификации.

Вот как мы можем получить объект File из :

    function showFile (input) {let file  = input.files [0];  alert (`Имя файла: $ {file.name}`); //например, my.png alert (`Последнее изменение: $ {file.lastModified}`); //например, 1552830408824}   

Обратите внимание:

Вход может выбрать несколько файлов, поэтому input.files представляет собой объект в виде массива с ними. Здесь у нас только один файл, поэтому мы просто берем input.files[0pting.

FileReader

FileReader — это объект, предназначенный исключительно для чтения данных из объектов Blob (а значит, и из File ).

Он доставляет данные с использованием событий, так как чтение с диска может занять время.

Конструктор:

  let reader = new FileReader (); //без аргументов  

Основные методы:

  • readAsArrayBuffer (blob) — считывать данные в двоичном формате ArrayBuffer .
  • readAsText (blob, [кодировка]) — читать данные как текстовую строку с заданной кодировкой (по умолчанию utf-8 ) .
  • readAsDataURL (blob) — прочитать двоичные данные и закодировать их как URL-адрес данных base64.
  • abort () — отменить операцию.

Выбор читать * зависит от того, какой формат мы предпочитаем, как мы собираемся использовать данные.

  • readAsArrayBuffer — для двоичных файлов для выполнения низкоуровневых двоичных операций. Для высокоуровневых операций, таких как нарезка, File наследуется от Blob , поэтому мы можем вызывать их напрямую, без чтения.
  • readAsText — для текстовых файлов, когда мы хотели бы получить строку.
  • readAsDataURL — когда мы бы хотели бы использовать эти данные в src для img или другого тега. Для этого есть альтернатива чтению файла, как описано в главе Blob: URL.createObjectURL(file).

По мере чтения есть события:

  • loadstart — загрузка началась.
  • progress — происходит во время чтения.
  • load — ошибок нет, чтение завершено.
  • abort abort () вызван.
  • error — произошла ошибка.
  • loadend — чтение завершено либо успешно, либо неудачно.

Когда чтение завершено, мы можем получить доступ к результату как:

  • reader.result — результат (в случае успеха)
  • reader.error — это error (в случае неудачи).

Безусловно, наиболее широко используемыми событиями являются load и error .

Вот пример чтения файла:

    function readFile (input) {let file = input.files [0];  let reader = new FileReader ();  reader.readAsText (файл);  reader.onload = функция () {console.log (reader.result);  };  reader.onerror = функция () {console.log (reader.error);  };}   

FileReader для больших двоичных объектов

Как упоминалось в главе Blob, FileReader может читать не только файлы, но и любые blob-объекты.

Мы можно использовать его для преобразования большого двоичного объекта в другой формат:

  • readAsArrayBuffer (blob) — в ArrayBuffer ,
  • readAsText (blob, [кодировка]) — в строку (альтернатива TextDecoder ),
  • readAsDataURL (blob) — к URL-адресу данных base64.
FileReaderSync доступен внутри Web Workers

Для Web Workers также существует синхронный вариант FileReader , называется FileReaderSync.

Его методы чтения read * не генерируют события, а скорее возвращают результат, как это делают обычные функции.

Но это только внутри Web Worker, потому что задержки в синхронных вызовах возможны, если le чтение из файлов, в Web Workers менее важно. Они не влияют на страницу.

Summary

File объекты наследуются от Blob .

Помимо методов и свойств Blob , объекты File также имеют name и lastModified , плюс внутренняя возможность чтения из файловой системы. Обычно мы получаем объекты File из пользовательского ввода, например или события Drag’n’Drop ( ondragend ) .

FileReader объекты могут читать из файла или большого двоичного объекта в одном из трех форматов:

  • Строка ( readAsText ).
  • ArrayBuffer ( readAsArrayBuffer ).
  • URL-адрес данных в кодировке base-64 ( readAsDataURL ).

Однако во многих случаях нам не нужно читать содержимое файла. Как и в случае с большими двоичными объектами, мы можем создать короткий URL-адрес с помощью URL.createObjectURL (file) и назначить его или . Таким образом, файл можно загрузить или отобразить как изображение, как часть холста и т. Д.

И если мы собираемся отправить File через сеть, это тоже просто: сетевой API, такой как XMLHttpRequest или fetch , изначально принимает объекты File .

Оцените статью
Botgadget.ru
Добавить комментарий