Файлы — API Drag and Drop

Файлы — API Drag and Drop.

Вероятно, самая интересная особенность API Drag and Drop (Перетаскивание) — это возможность работать с файлами. Этот API доступен не только изнутри документа — он интегрируется с системой, позволяя пользователям перетаскивать элементы из браузера в другие приложения и наоборот. Чаще всего возникает необходимость перетаскивать из внешних источников именно файлы.

Мы уже упоминали специальное свойство объекта dataTransfer, возвращающее массив со списком перетаскиваемых файлов. Эту информацию можно применять для построения сложных сценариев, помогающих пользователям работать с файлами или загружать их на сервер.

Листинг 8.9. Простой шаблон для перетаскивания файлов

<!DOCTYPE html>

<html lang="ru">

<head>

<title>Перетаскивание</title>

<link rel="stylesheet" href="dragdrop. css">

<script src="dragdrop. js"></script>

</head>

<body>

<section id="dropbox">

Перетаскивайте сюда файлы </section>

</body>

</html>

HTML-документ из листинга 8.9 всего лишь определяет зону приема. Файлы на нее нужно перетаскивать из внешних приложений (например, Проводника Windows). Для обработки данных в файлах предназначен следующий код.

Листинг 8.10. Обработка данных в файлах

Function initiate(){

Drop=document. getElementById(‘dropbox’); drop. addEventListener(‘dragenter’, function(e){ e. preventDefault(); }, false); drop. addEventListener(‘dragover’, function(e){ e. preventDefault(); }, false); drop. addEventListener(‘drop’, dropped, false);

}

Function dropped(e){ e. preventDefault(); var files=e. dataTransfer. files;

Var list=»;

For(var f=0;f<files. length;f++){

List+=’File: ‘+files[f].name+’ ‘+files[f].size+'<br>’;

}

Drop. innerHTML=list;

}

Window. addEventListener(‘load’, initiate, false);

Информацию, возвращаемую свойством files, можно сохранить в переменной и затем считать в цикле for. В коде из листинга 8.10 мы всего лишь выводим на экран название и размер каждого файла, попавшего в зону приема. Для того чтобы применить эту информацию при построении более сложных приложений, нам придется обратиться к помощи других API и техник программирования. Об этом поговорим в следующих главах книги.

Создайте новые файлы с примерами кода из листингов 8.9 и 8.10, а затем откройте шаблон в своем браузере. Перетащите файлы из Проводника Windows или другой аналогичной программы на зону приема в шаблоне. Вы должны увидеть список названий и размеры всех выбранных файлов.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *