File и FileReader

File

Объект File наследуется от объекта Blob и обладает возможностями по взаимодействию с файловой системой и как правило извлекаются из объекта FileList, который возвращён как результат пользовательского выбора файлов с помощью <input> элемента

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

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

new File(fileParts, fileName, [options])

fileParts

массив значений Blob/BufferSource/строки.

fileName

имя файла, строка.

options

необязательный объект со свойствами:

Свойства

File.lastModified

Возвращает время последнего изменения файла в миллисекунде с эпохи UNIX (1 января 1970 года в 00:00:00 в часовом поясе UTC).

File.lastModifiedDate

Возвращает дату последнего изменения файла, на который ссылается объект File.

File.name

Возвращает имя файла, на который ссылается объект File.

File.size>

Возвращает размер файла.

File.webkitRelativePath

Возвращает URL адрес, где расположен File

File.type

Возвращает MIME тип файла.

Во-вторых, чаще всего мы получаем файл из <input type="file"> или через перетаскивание с помощью мыши, или из других интерфейсов браузера. В этом случае файл получает эту информацию из ОС.

В этом примере мы получаем объект File из <input type="file">:

<input type="file" onchange="showFile(this)">
<div id=show></div>
<script>
function showFile(input) {
  let file = input.files[0];
  document.getElementById("show").innerHTML = `<br>File name: ${file.name} <br>\
Size: ${file.size} <br>\
Type: ${file.type} <br>\
Last modified: ${file.lastModified}<br>\
webkitRelativePath: ${File.webkitRelativePath}`;
}
</script>

Через <input> можно выбрать несколько файлов, поэтому input.files – псевдомассив выбранных файлов. Здесь у нас только один файл, поэтому мы просто берём input.files[0].

FileList

Объект этого типа возвращается свойством <input> элемента, что позволяет получить список выбранных файлов из <input type="file">. Также используется для получения списка файлов, брошенных в область веб-контента (Web content) по средствам drag and drop API.

Все <input> элементы имеют файловые массивы которые позволяют получить доступ к файлам. Пример файлового тега:

<input id="fileItem" type="file">

Этот код извлекает первый File object из списка:

var file = document.getElementById('fileItem').files[0];

Свойство

length

Количество файлов в списке, свойство только для чтения (read-only)

Метод item()

 File item(index)

index

Отсчитываемый от нуля индекс файла для извлечения из списка.

Этот пример выполняет перебор всех файлов, выбранных пользователем, используя элемент Input:

<input type="file" id="myfileinput" multiple onchange="showFile(this)">
<div id=show></div>
<script>
function showFile(fileInput) {
var show=document.getElementById("show"), files = fileInput.files, file;

// обходит файлы используя цикл
for (var i = 0; i < files.length; i++) {

   
    file = files.item(i); // получаем сам файл
                          // или можно так file = files[i];
    
    show.innerHTML += `<br> ${file.name} ${file.type} ${file.size} ${file.lastModified}`;
}}
</script>

FileReader

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

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

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

Свойства

FileReader.error

представляет собой ошибку, происходящую при чтении файла.

FileReader.readyState

Число обозначающее состояние объекта FileReader. Принимает одно из значений:

• 0 : Данные ещё не были загружены.
• 1 : Данные в данный момент загружаются.
• 2 : Операция чтения была завершена.

FileReader.result

Данные из файла. Значение свойства действительно только когда завершится операция чтения, причём формат данных зависит от способа, с помощью которого процесс был вызван.

Наиболее часто используемые события – это, конечно же, load и error.

Обработка событий

FileReader.onabort

Обработчик для события abort. Это событие срабатывает каждый раз, когда прерывается операция чтения.

FileReader.onerror

Обработчик для события error. Это событие срабатывает каждый раз, когда при чтении возникает ошибка.

FileReader.onload

Обработчик для события load. Это событие срабатывает при каждом успешном завершении операции чтения.

FileReader.onloadstart

Обработчик для события loadstart. Это событие срабатывает каждый раз, при запуске процесса чтения.

FileReader.onloadend

Обработчик для события loadend. Это событие срабатывает каждый раз по окончании процесса чтения (не важно, успешном или нет).

FileReader.onprogress

Обработчик для события progress. Это событие срабатывает во время чтения данных из Blob.

Методы

FileReader.abort()

Отмена операции чтения. После вызова, значение readyState станет равным DONE.

FileReader.readAsArrayBuffer()

Запускает процесс чтения данных указанного Blob, по завершении, атрибут result будет содержать данные файла в виде ArrayBuffer.

FileReader.readAsBinaryString()

Запускает процесс чтения данных указанного Blob, по завершении, атрибут result будет содержать бинарные данные файла в виде строки.

FileReader.readAsDataURL()

Запускает процесс чтения данных указанного Blob, по завершении, атрибут result будет содержать данные файла в виде data: URL.

FileReader.readAsText()

Запускает процесс чтения данных указанного Blob, по завершении, атрибут result будет содержать данные файла в виде текста.

Примеры

    <h1>Read an image file</h1>
    <input type="file" accept="image/*" id="file-selector">
    <p id="status"></p>
    <div><img id="output"></div>
    <script>
      const status = document.getElementById('status');
      const output = document.getElementById('output');
      if (window.FileList && window.File && window.FileReader) {
        document.getElementById('file-selector').addEventListener('change', event => {
          output.src = '';
          status.textContent = '';
          const file = event.target.files[0];
          if (!file.type) {
            status.textContent = 'Error: The File.type property does not appear to be supported on this browser.';
            return;
          }
          if (!file.type.match('image.*')) {
            status.textContent = 'Error: The selected file does not appear to be an image.'
            return;
          }
          const reader = new FileReader();
          reader.addEventListener('load', event => {
            output.src = event.target.result;
          });
          reader.readAsDataURL(file);
        }); 
      }
    </script>

<input type="file"  onchange="readFile(this)">

<script>
function readFile(input) {
  let file = input.files[0];

  let reader = new FileReader();

  reader.readAsText(file);

  reader.onload = function() {
    console.log(reader.result);
  };

  reader.onerror = function() {
    console.log(reader.error);
  };

}
</script>