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

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

createObjectURL()

для каждого из файлов будет создан URL-адрес и элемент

<img>,

чтобы отобразить миниатюры изображений, на которые ссылаются эти URL-адреса.

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

<!DOCTYPE html>

<html><head>

<script>

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

// к соглашению об именовании функции 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;

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

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

window.onload = function() {

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

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

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

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

 droptarget.ondragenter = function(e) {

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

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

 // спецификацией 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; // Нас интересует

<b>    }                                     // буксируемый объект</b>

 };

<b>  // Снимает выделение площадки сброса, как только пользователь</b>

 // отбуксирует файл за ее пределы

 droptarget.ondragleave = function() {

 droptarget.classList.remove("active");

 };

<b>  // Этот обработчик просто сообщает броузеру продолжать посылать события </b>

 droptarget.ondragover = function(e) { return false; };

<b>  // Когда пользователь сбросит файлы, необходимо получить их URL-адреса</b>

 // и отобразить миниатюры,

 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:

 // в <img>

 img.onload = function() { // После загрузки изобр.

 this.width = 100; // установить его размеры

 document.body.appendChild(this); // и вставить в документ.

 revokeBlobURL(this.src); // Предотвратить утечки памяти!

 }

 droptarget.classList.remove("active"); //Снять выделение

 return false; // Событие сброса обработано

 }

};

</script>