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

Флэнаган Дэвид
Шрифт:

var blob = bb.getBlob("x-optional/mime-type-here");

В начале этого раздела мы узнали, что двоичные объекты имеют метод

slice,
который разбивает их на фрагменты. Точно так же имеется возможность объединять двоичные объекты, передавая их методу
append
объекта
BlobBuilder
.

22.6.4. URL-адреса, ссылающиеся на двоичные объекты

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

XMLHttpRequest
.

Создаются URL-адреса, ссылающиеся на двоичные объекты, с помощью функции

createObjectURL.
На момент написания этих строк проект спецификации и Firefox 4 помещали эту функцию в глобальный объект URL, а броузер Chrome и библиотека Webkit добавляли свой префикс к имени этого объекта, называя его webkitURL. Ранние версии спецификации (и ранние реализации броузеров) помещали эту функцию непосредственно в объект
Window
. Чтобы получить возможность переносимым образом создавать URL-адреса, ссылающиеся на двоичные объекты, можно определить вспомогательную функцию, как показано ниже:

var getBlobURL = (window.URL && URL.createObjectURL.bind(URL)) ||

(window.webkitURL && webkitURL.createObjectURL.bind(webkitURL)) ||

window.createObjectURL;

Фоновые потоки выполнения также могут использовать этот прикладной интерфейс и обращаться к тем же функциям, в том же объекте URL (или webkitURL).

Если передать двоичный объект функции

createObjectURL,
она вернет URL-адрес (в виде обычной строки). Этот адрес начинается с названия схемы blob://, за которой следует короткая строка, ссылающаяся на двоичный объект с некоторым уникальным идентификатором. Обратите внимание, что эти URL-адреса совершенно не похожи на URL-адреса data://, которые представляют свое собственное содержимое. URL-адрес, ссылающийся на двоичный объект, - это просто ссылка на объект
Blob
, хранящийся в памяти броузера или на диске. URL-адреса вида blob:// также отличаются от URL-адресов file://, которые ссылаются непосредственно на файл в локальной файловой системе, давая возможность увидеть путь к файлу, позволяя просматривать содержимое каталогов и тем самым затрагивая проблемы безопасности.

Пример 22.10 демонстрирует два важных приема. Во-первых, он реализует «площадку для сброса», которая обрабатывает события механизма буксировки мышью (drag-and-drop), имеющие отношение к файлам. Во-вторых, когда пользователь сбросит один или более файлов на эту «площадку», с помощью функции

createObjectURL
для каждого из файлов будет создан URL-адрес и элемент
<img>,
чтобы отобразить миниатюры изображений, на которые ссылаются эти URL-адреса.

Пример 22.10. Отображение файлов изображений с использованием URL-adpecoe двоичных объектов

<!DOCTYPE html>

<html><head>

<script>

// На момент написания этих строк создатели Firefox и Webkit еще не пришли

// к соглашению об именовании функции createObjectURL

var getBlobURL = (window.URL && URL.createObjectURL.bind(URL)) ||

(window.webkitURL && webkitURL.createObjectURL.bind(webkitURL)) ||

window.createObjectURL;

var revokeBlobURL = (window.URL && URL.revokeObjectURL.bind(URL)) ||

(window.webkitURL && webkitURL.revokeObjectURL.bind(webkitURL)) ||

window.revokeObjectURL;

// После загрузки документа добавить обработчики событий к элементу droptarget,

// чтобы он мог обрабатывать сбрасываемые файлы

window.onload = function {

// Отыскать элемент, к которому следует добавить обработчики событий,

var droptarget = document.getElementByld("droptarget");

// Выделяет элемент droptarget изменением рамки, когда пользователь

// буксирует файлы над ним.

droptarget.ondragenter = function(e) {

// Игнорировать, если буксируется что-то иное, не являющееся файлом.

// Когда будет реализована поддержка атрибута dropzone, определяемого

// спецификацией HTML5, это позволит упростить обработчик,