Сами по себе двоичные объекты не представляют особого интереса, но они служат важным механизмом обмена данными для некоторых прикладных интерфейсов в языке JavaScript, которые работают с двоичными данными. На рис. 22.2 показано, как можно обмениваться двоичными объектами во Всемирной паутине, читать и сохранять их в локальной файловой системе, в локальных базах данных и даже обмениваться ими с другими окнами и фоновыми потоками выполнения. Он также показывает, как можно получить содержимое двоичного объекта в виде текста, типизированного массива или URL-адреса.
Прежде чем приступать к работе с двоичным объектом, его необходимо получить. Сделать это можно множеством способов, одни из которых связаны с использованием уже знакомых вам прикладных
интерфейсов, а другие - с прикладными интерфейсами, которые описываются ниже в этой главе:
• Двоичные объекты поддерживаются алгоритмом структурированного копирования (смотрите врезку «Структурированные копии» выше), а это означает, что их можно получить от другого окна или фонового потока выполнения вместе с событием «message» (разделы 22.3 и 22.4).
• Двоичные объекты можно извлекать из баз данных на стороне клиента, как описывается в разделе 22.8.
• Двоичные объекты можно загрузить из сети по протоколу HTTP, используя ультрасовременные возможности, определяемые спецификацией XHR2. Об этом рассказывается в разделе 22.6.2.
• Можно также создать свой двоичный объект, сконструировав его с помощью объекта
BlobBuilder
из строки, объекта
ArrayBuffег
(раздел 22.5) или другого двоичного объекта. Объект
BlobBuilder
будет демонстрироваться в разделе 22.6.3.
• Наконец, и, пожалуй, самое важное, - объект
File
в клиентском JavaScript является подтипом типа
Blob
: объект
File
– это просто двоичный объект с данными, которые имеют имя и дату последнего изменения. Получить объект
File
можно из элемента <input type="file"> и от прикладного интерфейса буксировки мышью (drag-and-drop), как описывается в разделе 22.6.1. Объект
File
можно также получить с помощью прикладного интерфейса доступа к файловой системе, который охватывается в разделе 22.7.
Получив двоичный объект, над ним можно выполнить различные операции, многие из которых являются симметричными операциям, описанным выше:
• Двоичный объект можно отправить другому окну или фоновому потоку выполнения с помощью метода
postMessage
(разделы 22.3 и 22.4).
• Двоичный объект можно сохранить в базе данных на стороне клиента (раздел 22.8).
• Двоичный объект можно выгрузить на сервер, передав его методу
send
объекта
XMLHttpRequest
. Как это можно реализовать, демонстрирует пример 18.9 выгрузки файла (напомню, что объект
File
– это всего лишь специализированная разновидность двоичного объекта
Blob
).
• Можно воспользоваться функцией
createObjectURL,
чтобы получить специальный URL-адрес вида blob://, ссылающийся на двоичное содержимое, и затем использовать его вместе с механизмами DOM или CSS. Этот прием демонстрируется в разделе 22.6.4.
• Можно воспользоваться объектом
FileReader
, чтобы асинхронно (или синхронно, в фоновом потоке выполнения) извлечь содержимое двоичного объекта в строку или в объект
ArrayBuffег
. Этот прием демонстрируется в разделе 22.6.5.
• Можно воспользоваться прикладным интерфейсом доступа к файловой системе и объектом
FileWriter
, который описывается
в разделе 22.7, чтобы записать двоичный объект в локальный файл.
В следующих подразделах демонстрируются простые способы получения и использования двоичных объектов. Более сложные приемы, связанные с использованием локальной файловой системы и базами данных на стороне клиента, будут описаны далее, в отдельных разделах.
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.