Технология работы с клиентскими файлами

  Технология работы с файлами, которые находятся на клиентском устройстве, позволяет получить доступ к контенту таких файлов и как-то использовать этот контент на Web-странице или Web-сервере.
  Конечно же, разработчик не может получить доступ к любому файлу клиентского устройства, и, тем более, он не может получить доступ к файловой системе клиентского устройства. Иметь дело можно лишь с файлами, на которые укажет пользователь. Например, в запросе элемента тега INPUT TYPE=file, или в рамках технологии перетаскивания.
  Файл, который стал доступным в скрипте, можно читать в память и, например, использовать его контент (или часть контента) для вставки на Web-страницу как текст, или как медиаконтент.
  В принципе, функционал технологии работы с клиентскими файлами может удовлетворить любые фантазии разработчика, этот функционал ограничен лишь доступностью таких файлов.
  File.
  File - Является интерфейсом к файлу на клиентском устройстве.
  Экземпляр объекта File не является интерфейсом к контенту файла. Для того чтобы получить контент файла необходимо воспользоваться интерфейсом FileReader.
  Экземпляр доступен:

  1. В любом элементе списка FileList
  File свойства.
  lastModified - Содержит количество миллисекунд от полночи 1 января 1970 года (экземпляр объекта DOMTimeStamp) до времени последнего изменения файла.
  Значение имеет числовой формат.

Формат записи в коде скрипта:

  • Экземпляр объекта File.lastModified

Значения формата записи:

  lastModifiedDate - Содержит дату последнего изменения файла.

Формат записи в коде скрипта:

  • Экземпляр объекта File.lastModifiedDate

Значения формата записи:

  name - Содержит имя файла (или пустое значение).
  Значение имеет строковый формат.
  Имя файла не содержит предшествующий путь к нему.

Формат записи в коде скрипта:

  • Экземпляр объекта File.name

Значения формата записи:

  [webkit]RelativePath - Содержит относительный путь файла в папке (вместе с именем файла и именем папки), если список, в котором находится этот экземпляр объекта File, получен с помощью элемента тега INPUT с атрибутом [WEBKIT]DIRECTORY.
  Значение имеет строковый формат.

Формат записи в коде скрипта:

  • Экземпляр объекта File.[webkit]RelativePath

Значения формата записи:

  size - Содержит размер (в байтах) контента файла.
  Значение имеет числовой формат.

Формат записи в коде скрипта:

  • Экземпляр объекта File.size

Значения формата записи:

  type - Содержит MIME тип файла (или пустое значение).
  Значение имеет строковый формат.

Формат записи в коде скрипта:

  • Экземпляр объекта File.type

Значения формата записи:

  File методы.
  slice - Выделяет часть двоичного контента из файла.
  Возвращает ссылку на экземпляр объекта Blob с выделенным контентом.

Формат записи в коде скрипта:

  • Экземпляр объекта File.slice([Начальный байт [, Конечный байт[, Тип контента]]])

Значения формата записи:

  • Экземпляр объекта File - Любой операнд значения со значением экземпляра объекта File.
  • . - Оператор доступа к методу объекта.
  • slice - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • Начальный байт - Номер байта, с которого начинается выделенный контент, заданный в любом числовом формате.
      Если не задан, то выделение начнётся с первого байта.
  • , - Оператор группировки. Ключевое слово в этом формате.
  • Конечный байт - Номер байта, которым закончится выделенный контент, заданный в любом числовом формате.
      Если не задан, то выделение закончится последним байтом.
  • Тип контента - Значение свойства type нового экземпляра объекта Blob заданное в любом строковом формате.
      По умолчанию - пустая строка.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  FileList.
  FileList - Является интерфейсом к спискам клиентских файлов.
  Каждый элемент этого списка является экземпляром объекта File.
  Экземпляр доступен:

  1. Через свойство files объекта HTMLInputElement
  2. Через свойство files объекта DataTransfer
  FileList свойства.
  length - Содержит количество элементов в списке.
  Значение имеет числовой формат.

Формат записи в коде скрипта:

  • Экземпляр объекта FileList.length

Значения формата записи:

  Указатель - Содержит элемент списка, определяемый указателем.

Формат записи в коде скрипта:

  • Экземпляр объекта FileList[Указатель]

Значения формата записи:

  FileList методы.
  item - Возвращает элемент списка заданный указателем.

Формат записи в коде скрипта:

  • Экземпляр объекта FileList.item(Указатель)

Значения формата записи:

  FileReader.
  FileReader - Является интерфейсом асинхронного доступа к контенту файлов, которые представлены интерфейсами File или Blob.
  Экземпляр доступен:

  1. В выражении

    new FileReader()

    где:
    • new - Ключевое слово.
    • FileReader - Ключевое слово.

  FileReader свойства.
  error - Содержит ссылку на экземпляр объекта DOMError, если, при выполнении операции запущенной одним из методов readAsArrayBuffer, readAsBinaryString, readAsDataURL, или readAsTextr, произошла ошибка.

Формат записи в коде скрипта:

  • Экземпляр объекта FileReader.error

Значения формата записи:

  onabort - Содержит функцию, которая должна быть вызвана, если, в процессе получения контента одним из методов readAsArrayBuffer, readAsBinaryString, readAsDataURL, или readAsTextr, был вызван метод abort.

Формат записи в коде скрипта:

  • Экземпляр объекта FileReader.onabort[ = Функция]

Значения формата записи:

  onerror - Содержит функцию, которая должна быть вызвана, если, в процессе получения контента одним из методов readAsArrayBuffer, readAsBinaryString, readAsDataURL, или readAsTextr, произошла ошибка.

Формат записи в коде скрипта:

  • Экземпляр объекта FileReader.onerror[ = Функция]

Значения формата записи:

  onload - Содержит функцию, которая должна быть вызвана, если операция, запущенная одним из методов readAsArrayBuffer, readAsBinaryString, readAsDataURL, или readAsTextr, успешно завершёна, и ожидамый контент получен.

Формат записи в коде скрипта:

  • Экземпляр объекта FileReader.onload[ = Функция]

Значения формата записи:

  onloadend - Содержит функцию, которая должна быть вызванаreadAsArrayBuffer, readAsBinaryString, readAsDataURL, или readAsTextr, завершёна успешно или не успешно.

Формат записи в коде скрипта:

  • Экземпляр объекта FileReader.onloadend[ = Функция]

Значения формата записи:

  onloadstart - Содержит функцию, которая должна быть вызвана, если, одним из методов readAsArrayBuffer, readAsBinaryString, readAsDataURL, или readAsTextr, запущена операция получения контента.

Формат записи в коде скрипта:

  • Экземпляр объекта FileReader.onloadstart[ = Функция]

Значения формата записи:

  onprogress - Содержит функцию, которая должна быть вызвана, если операция, запущенная одним из методов readAsArrayBuffer, readAsBinaryString, readAsDataURL, или readAsTextr, находится в процессе чтения ожидаемого контента.

Формат записи в коде скрипта:

  • Экземпляр объекта FileReader.onprogress[ = Функция]

Значения формата записи:

  readyState - Содержит информацию о текущем состояние процесса, запущенного одним из методов readAsArrayBuffer, readAsBinaryString, readAsDataURL, или readAsTextr.
  Значение имеет числовой формат.

Формат записи в коде скрипта:

  • Экземпляр объекта FileReader.readyState

Значения формата записи:

  result - Содержит контент, полученный одним из методов readAsArrayBuffer, readAsBinaryString, readAsDataURL, или readAsTextr.
  Значение имеет строковый формат или ссылается на экземпляр объекта ArrayBuffer.

Формат записи в коде скрипта:

  • Экземпляр объекта FileReader.result

Значения формата записи:

  FileReader методы.
  abort - Отменяет операцию получения контента запущенную одним из методов readAsArrayBuffer, readAsBinaryString, readAsDataURL, или readAsTextr.
  Возвращает значение undefined.
  Вследствие вызова метода abort свойство readyState принимает значение - 2, наступает событие abort, и свойство result останется пустым.

Формат записи в коде скрипта:

  • Экземпляр объекта FileReader.abort()

Значения формата записи:

  addEventListener - Устанавливает функцию обработчик событий.
  Возвращает значение undefined.

Формат записи в коде скрипта:

  • Экземпляр объекта FileReader.addEventListener(Событие, Функция, false)

Значения формата записи:

  • Экземпляр объекта FileReader - Любой операнд значения со значением экземпляра объекта FileReader.
  • . - Оператор доступа к методу объекта.
  • addEventListener - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • Событие - Имя события, предусмотренного для объекта FileReader, заданное в любом строковом формате.
  • Функция - Любой операнд значения со значением функция.
      Значением первого аргумента этой функции всегда является экземпляр объекта Event обрабатываемого события.
      Одна функция-обработчик устанавливается методом addEventListener только один раз и повторные вызовы метода для этой же функции не имеют значения.
      Однако другие функции могут быть установлены методом addEventListener для этого же события, причем выполняться, в случае возникновения события, они будут в том же порядке, как записаны в скрипте.
      Однако, если обработчики этого события установлены методом addEventListener в разных скриптах, то порядок их выполнения не предсказуем.
  • false - Логическое значение.
      Если указано, то функция будет отмечена как обычный обработчик.
  • , - Оператор группировки. Ключевое слово в этом формате.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  dispatchEvent - Инициализирует возникновение заданного события.
  Возвращает значение undefined.
  Инициализированное событие не происходит на самом деле, но инициализация приводит к вызову его обработчика.

Формат записи в коде скрипта:

  • Экземпляр объекта FileReader.dispatchEvent(Событие)

Значения формата записи:

  readAsArrayBuffer - Асинхронно запускает извлечение контента заданного файла с преобразованием этого контента в формат ArrayBuffer.
  Возвращает значение undefined.
  Инициализирует событие loadstart.
  Если операция извлечения контента прошла успешно, то свойство readyState принимает значение - 2, наступает событие load, наступает событие loadend, и свойство result будет ссылаться на соответствующий экземпляр объекта ArrayBuffer.
  Если операция извлечения контента не прошла успешно, то свойство error получит значение ошибки, наступает событие error или abort, наступает событие loadend, и свойство result останется пустым.

Формат записи в коде скрипта:

  • Экземпляр объекта FileReader.readAsArrayBuffer(Объект)

Значения формата записи:

  readAsBinaryString - Асинхронно запускает извлечение контента заданного файла с преобразованием этого контента в строковый формат с бинарным представлением данных.
  Возвращает значение undefined.
  Инициализирует событие loadstart.
  Если операция извлечения контента прошла успешно, то свойство readyState принимает значение - 2, наступает событие load, наступает событие loadend, и свойство result будет ссылаться на соответствующую строку с бинарным представлением контента.
  Если операция извлечения контента не прошла успешно, то свойство error получит значение ошибки, наступает событие error или abort, наступает событие loadend, и свойство result останется пустым.

Формат записи в коде скрипта:

  • Экземпляр объекта FileReader.readAsBinaryString(Объект)

Значения формата записи:

  readAsDataURL - Асинхронно запускает извлечение контента заданного файла с преобразованием этого контента в строку в формате DataURL.
  Возвращает значение undefined.
  Инициализирует событие loadstart.
  Если операция извлечения контента прошла успешно, то свойство readyState принимает значение - 2, наступает событие load, наступает событие loadend, и свойство result будет ссылаться на соответствующую строку в формате DataURL.
  Если операция извлечения контента не прошла успешно, то свойство error получит значение ошибки, наступает событие error или abort, наступает событие loadend, и свойство result останется пустым.
  Значение DataURL, например, можно использовать как значение для свойства src объекта HTMLImageElement, для визуализации не Web-странице изображения, выбранного пользователем с помощью элемента тега INPUT TYPE=file.

Формат записи в коде скрипта:

  • Экземпляр объекта FileReader.readAsDataURL(Объект)

Значения формата записи:

  readAsText - Асинхронно запускает извлечение контента заданного файла с преобразованием этого контента в строку текста в заданной кодировке.
  Возвращает значение undefined.
  Инициализирует событие loadstart.
  Если операция извлечения контента прошла успешно, то свойство readyState принимает значение - 2, наступает событие load, наступает событие loadend, и свойство result будет ссылаться на соответствующую строку с текстом.
  Если операция извлечения контента не прошла успешно, то свойство error получит значение ошибки, наступает событие error или abort, наступает событие loadend, и свойство result останется пустым.

Формат записи в коде скрипта:

  • Экземпляр объекта FileReader.readAsText(Объект[, Кодировка])

Значения формата записи:

  removeEventListener - Отменяет функцию обработчик событий, установленную методом addEventListener.
  Возвращает значение undefined.

Формат записи в коде скрипта:

  • Экземпляр объекта FileReader.removeEventListener(Событие, Функция, false)

Значения формата записи:

Сводная таблица событий
Имя Свойство Объект Примечание
abort onabort IDBDatabase Прерывание операции извлечения контента
error onerror FileReader Ошибка операции извлечения контента
load onload FileReader Успех операции извлечения контента
loadend onloadend FileReader Окончание операции извлечения контента
loadstart onloadstart FileReader Начало операции извлечения контента
progress onprogress FileReader Выполнение операции извлечения контента

Сводная таблица методов
Имя метода Объект Функционал Возвращаемое значение
abort FileReader Отменяет операцию получения контента. undefined
addEventListener FileReader Устанавливает функцию обработчик событий. undefined
dispatchEvent FileReader Инициализирует возникновение заданного события. undefined
item FileList Возвращает элемент списка. Экземпляр объекта File
readAsArrayBuffer FileReader Асинхронно запускает извлечение контента в формате ArrayBuffer. undefined
readAsBinaryString FileReader Асинхронно запускает извлечение контента в формате с бинарным представлением данных. undefined
readAsDataURL FileReader Асинхронно запускает извлечение контента в формате DataURL. undefined
readAsText FileReader Асинхронно запускает извлечение контента в формате текста в заданной кодировке. undefined
removeEventListener FileReader Отменяет функцию обработчик событий. undefined
slice File Выделяет часть двоичного контента из файла. Экземпляр объекта Blob

Сводная таблица свойств
Имя свойства Объект Содержание Тип значения
error FileReader Ошибка операции извлечения контента. Экземпляр объекта
lastModified File Количество миллисекунд от полночи 1 января 1970 года до времени последнего изменения файла. Числовой формат
lastModifiedDate File Дата последнего изменения файла. Экземпляр объекта
length FileList Количество элементов в списке. Числовой формат
name File Имя файла. Строковый формат
readyState FileReader Информация о текущем состоянии процесса извлечения контента. Числовой формат
[webkit]RelativePath File Относительный путь файла. Строковый формат
result FileReader Результат операции извлечения контента. Числовой формат , или экземпляр объекта
size File Размер файла. Числовой формат
type File MIME тип файла. Строковый формат


Пример:

<INPUT TYPE="file" ID="input">
<IMG ID="image" SRC="" HEIGHT="200" ALT="Вставьте сюда какое-нибудь изображение с вашего компьютера">
......

<SCRIPT>
  var N0 = document.getElementById("input");
  var N1 = document.getElementById("image");
  var N3 = new FileReader();
  var SY = function(X) { N1.src = this.result; };
  var SX = function(X) { var file = this.files[0]; N3.readAsDataURL(file); N3.onload = SY; };
  N0.onchange = SX;

</SCRIPT>
Вставьте сюда какое-нибудь изображение с вашего компьютера