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

Прежде чем приступать к работе с двоичным объектом, его необходимо получить. Сделать это можно множеством способов, одни из которых связаны с использованием уже знакомых вам прикладных интерфейсов, а другие - с прикладными интерфейсами, которые описываются ниже в этой главе:

• Двоичные объекты поддерживаются алгоритмом структурированного копирования (смотрите врезку «Структурированные копии» выше), а это означает, что их можно получить от другого окна или фонового потока выполнения вместе с событием «message» (разделы 22.3 и 22.4).

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

•  Двоичные объекты можно извлекать из баз данных на стороне клиента, как описывается в разделе 22.8.

• Двоичные объекты можно загрузить из сети по протоколу HTTP, используя ультрасовременные возможности, определяемые спецификацией XHR2. Об этом рассказывается в разделе 22.6.2.

• Можно также создать свой двоичный объект, сконструировав его с помощью объекта

<b>BlobBuilder</b>
из строки, объекта
<b>ArrayBuffег</b>
(раздел 22.5) или другого двоичного объекта. Объект
<b>BlobBuilder</b>
будет демонстрироваться в разделе 22.6.3.

• Наконец, и, пожалуй, самое важное, - объект

<b>File</b>
в клиентском JavaScript является подтипом типа
<b>Blob</b>
: объект
<b>File</b>
- это просто двоичный объект с данными, которые имеют имя и дату последнего изменения. Получить объект
<b>File</b>
можно из элемента <input type="file"> и от прикладного интерфейса буксировки мышью (drag-and-drop), как описывается в разделе 22.6.1. Объект
<b>File</b>
можно также получить с помощью прикладного интерфейса доступа к файловой системе, который охватывается в разделе 22.7.

Получив двоичный объект, над ним можно выполнить различные операции, многие из которых являются симметричными операциям, описанным выше:

• Двоичный объект можно отправить другому окну или фоновому потоку выполнения с помощью метода

<b>postMessage()</b>
(разделы 22.3 и 22.4).

•  Двоичный объект можно сохранить в базе данных на стороне клиента (раздел 22.8).

• Двоичный объект можно выгрузить на сервер, передав его методу

<b>send()</b>
объекта
<b>XMLHttpRequest</b>
. Как это можно реализовать, демонстрирует пример 18.9 выгрузки файла (напомню, что объект
<b>File</b>
- это всего лишь специализированная разновидность двоичного объекта
<b>Blob</b>
).

• Можно воспользоваться функцией

<b>createObjectURL(),</b>
чтобы получить специальный URL-адрес вида blob://, ссылающийся на двоичное содержимое, и затем использовать его вместе с механизмами DOM или CSS. Этот прием демонстрируется в разделе 22.6.4.

• Можно воспользоваться объектом

<b>FileReader</b>
, чтобы асинхронно (или синхронно, в фоновом потоке выполнения) извлечь содержимое двоичного объекта в строку или в объект
<b>ArrayBuffег</b>
. Этот прием демонстрируется в разделе 22.6.5.

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

<b>FileWriter</b>
, который описывается в разделе 22.7, чтобы записать двоичный объект в локальный файл.

В следующих подразделах демонстрируются простые способы получения и использования двоичных объектов. Более сложные приемы, связанные с использованием локальной файловой системы и базами данных на стороне клиента, будут описаны далее, в отдельных разделах.

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

Элемент

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

В броузерах, поддерживающих доступ к локальным файлам, свойство

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

<b>&lt;script&gt;</b>

<b>// Выводит информацию о выбранных файлах</b>

<b>function fileinfo(files) {</b>

<b>  for(var і = 0; і &lt; files.length; і++) { // files - подобный массиву объект</b>

<b>    var f = files[і];</b>

<b>    console.log(f.name, // Только имя: без пути к файлу</b>

<b>                f.size, f.type, // размер и тип - свойства Blob</b>

<b>                f.lastModifiedDate); // еще одно свойство объекта File</b>

<b>  }</b>

<b>}</b>

<b>&lt;/script&gt;</b>

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

В дополнение к файлам, выбранным с помощью элемента

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