Книга: JavaScript. Подробное руководство, 6-е издание

22.6.1. Файлы как двоичные объекты

22.6.1. Файлы как двоичные объекты

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

В броузерах, поддерживающих доступ к локальным файлам, свойство files элемента <input type='file"> будет ссылаться на объект FileList. Это объект, подобный массиву, элементами которого являются объекты File, соответствующие файлам, выбранным пользователем. Объект File - это двоичный объект Blob, который имеет дополнительные свойства name и lastModifiedDate:

<script>
// Выводит информацию о выбранных файлах
function fileinfo(files) {
  for(var і = 0; і < files.length; і++) { // files - подобный массиву объект
    var f = files[і];
    console.log(f.name, // Только имя: без пути к файлу
                f.size, f.type, // размер и тип - свойства Blob
                f.lastModifiedDate); // еще одно свойство объекта File
  }
}
</script>

Возможность выводить имена, типы и размеры файлов не представляет особого интереса. В разделах 22.6.4 и 22.6.5 будет показано, как можно использовать содержимое файла.

В дополнение к файлам, выбранным с помощью элемента <input>, пользователь может также дать сценарию доступ к локальным файлам, буксируя их мышью и сбрасывая в окно броузера. Когда приложение получает событие «drop», свойство dataTransfer.files объекта события будет содержать ссылку на объект FileList, связанный с этой операцией буксировки, если в ней участвовали файлы. Прикладной интерфейс буксировки объектов мышью рассматривался в разделе 17.7, а подобное использование файлов демонстрируется в примере 22.10.

Оглавление книги