JavaScript. Подробное руководство, 6-е издание
Шрифт:
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, это позволит упростить обработчик,
var types = e.dataTransfer.types;
if (!types ||
(types.contains && types.contains("Files")) ||
(types.indexOf && types.indexOf("Files") != -1)) {
droptarget.classList.add("active"); // Выделить элемент droptarget
return false; // Нас интересует
} // буксируемый объект
};
// Снимает выделение площадки сброса, как только пользователь
// отбуксирует файл за ее пределы
droptarget.ondragleave = function {
droptarget.classList.remove("active");
};
// Этот обработчик просто сообщает броузеру продолжать посылать события
droptarget.ondragover = function(e) { return false; };
// Когда пользователь сбросит файлы, необходимо получить их URL-адреса
// и отобразить миниатюры,
droptarget.ondrop = function(e) {
var files = e.dataTransfer.files; // Сброшенные файлы
for(var і = 0; і < files.length; i++) { // Обойти все файлы в цикле
var type = files[і].type;
if (type.substrings,6) !== "image/") // Пропустить не являющиеся
continue; // изображениями
var img = document.createElement("img"); // Создать элемент <img>
img.src = getBlobURL(files[i]); // URL blob:
Поделиться:
Популярные книги
Я граф. Книга XII
12. Дорогой барон!
Фантастика:
юмористическое фэнтези
попаданцы
аниме
5.00
рейтинг книги
Газлайтер. Том 3
3. История Телепата
Фантастика:
попаданцы
альтернативная история
аниме
5.00
рейтинг книги
Потомок бога
1. Локки
Фантастика:
попаданцы
альтернативная история
аниме
сказочная фантастика
5.00
рейтинг книги
Камень. Книга восьмая
8. Камень
Фантастика:
фэнтези
боевая фантастика
7.00
рейтинг книги
По осколкам твоего сердца
2. Хулиган и новенькая
Любовные романы:
современные любовные романы
5.56
рейтинг книги
Последний Паладин. Том 8
8. Путь Паладина
Фантастика:
боевая фантастика
попаданцы
5.00
рейтинг книги
Газлайтер. Том 15
15. История Телепата
Фантастика:
боевая фантастика
попаданцы
5.00
рейтинг книги
Вернувшийся: Посол. Том IV
4. Вернувшийся
Фантастика:
космическая фантастика
киберпанк
5.00
рейтинг книги
Абордажник
Вселенная EVE Online
Фантастика:
боевая фантастика
космическая фантастика
8.05
рейтинг книги
Лекарь Империи 6
6. Лекарь Империи
Фантастика:
городское фэнтези
боевая фантастика
аниме
попаданцы
5.00
рейтинг книги
Гримуар темного лорда II
2. Гримуар темного лорда
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Неучтенный элемент. Том 10
10. Антимаг. Вне системы
Фантастика:
фэнтези
5.00
рейтинг книги
Альфа-ноль. Компиляция. Книги 1-12
Альфа-ноль
Фантастика:
рпг
попаданцы
фэнтези
5.00
рейтинг книги
#Бояръ-Аниме. Газлайтер. Том 11
11. История Телепата
Фантастика:
фэнтези
попаданцы
аниме
5.00