Перетащите папку в Chrome, теперь доступно

Eiji Kitamura

По мере развития веб-приложений вам, возможно, покажется удобным предоставить пользователям возможность перетаскивать файлы с рабочего стола в браузер для редактирования, загрузки, совместного использования и т. д. Но, к сожалению, мы не можем перетаскивать папки на веб-страницы. К счастью, начиная с Chrome 21, эта проблема будет решена (уже доступна на канале разработчиков Chrome).

Передача нескольких файлов с помощью перетаскивания

Давайте посмотрим на пример кода существующего перетаскивания.

<div id="dropzone"></div>

var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
    var length = e.dataTransfer.files.length;
    for (var i = 0; i < length; i++) {
    var file = e.dataTransfer.files[i];
    ... // do whatever you want
    }
};

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

Как обрабатывать удаленные папки

Chrome 21 позволяет переместить папку или несколько папок в окно браузера. Чтобы справиться с этим, вам необходимо изменить способ обращения с брошенными объектами.

<div id="dropzone"></div>

var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
    var length = e.dataTransfer.items.length;
    for (var i = 0; i < length; i++) {
    var entry = e.dataTransfer.items[i].webkitGetAsEntry();
    if (entry.isFile) {
        ... // do whatever you want
    } else if (entry.isDirectory) {
        ... // do whatever you want
    }
    }
};

Обратите внимание: большая разница здесь в том, что вы можете рассматривать переброшенный объект как Entry ( FileEntry или DirectoryEntry ), используя новую функцию getAsEntry ( webkitGetAsEntry ). После получения доступа к объекту Entry вы можете использовать стандартные методы работы с файлами, которые были представлены в спецификации FileSystem API. Например, в этом примере показано, как определить, является ли переброшенный объект файлом или каталогом, проверив поле .isFile (или .isDirectory ).

Для получения дополнительной информации об API файловой системы прочтите «Изучение API файловой системы» , а о новых возможностях перетаскивания — в этом документе . Конечно, эти функции являются открытыми стандартами или скоро станут таковыми.