Файловый API HTML5 - Как узнать, что происходит?

Question

Я только начал работать с Файловым API HTML5.Мне удалось подражать поведению imgur: когда файл перетаскивается в документ, появляется большое наложение с сообщением, которое нужно отбросить, чтобы начать загрузку.

Однако я просто кое-что заметил: еслиВы перетаскиваете любой элемент на странице (текст, изображения), наложение показывает .Вы можете попробовать его на imgur , то же самое происходит с моим кодом.

Хотя при выпуске ничего не происходит, на самом деле сценарий проверяет, есть ли файлы для загрузки.У меня вопрос, как заранее узнать, что перетаскивается в документе? Сначала я подумал, что это невозможно с imgur, и все демонстрации из естьта же проблема.

К моему удивлению, Gmail может определить, является ли файл или просто что-то еще, на котором выполняется перетаскивание, но отследить фрагмент кода будет довольно невозможно.

(я могупредоставьте код, если хотите, однако он довольно прост: события dragenter, dragover и drop добавляются к элементу document, и все обрабатывается как в демонстрациях)

Спасибо.

Обновление

Роберт ответ правильный, похоже, это способ проверить Firefox.Методом проб и ошибок я нашел способ проверить с помощью Chrome:

event.originalEvent.dataTransfer.types.indexOf('Files')

Он вернет -1, если нет файлов.Теперь вы можете сделать что-то вроде:

try {
    if(event.originalEvent.dataTransfer.types.indexOf('Files') == -1){
        return false;
    }
} catch(E){}

try {
    if(!event.originalEvent.dataTransfer.types.contains("application/x-moz-file")){
        return false;
    }
} catch(E){}

Однако я не думаю, что это лучший способ проверить это, но добавление обоих условий в try не сработает.

Answer 1

Вы должны проверить тип перетаскивания в событии dragover / dragenter. В Firefox файл будет иметь тип application/x-moz-file, поэтому вы можете сделать некоторые варианты этого :

function checkDrag(event) {
    return event.dataTransfer.types.contains("application/x-moz-file");
}

Я не уверен, что эквивалентные типы для других браузеров.

Answer 2

Я использую это, чтобы игнорировать перетаскиваемые URL-адреса, текст и т. Д. (Не файлы) в моем handleDrop (событие):

if(typeof event.dataTransfer.files == "undefined" || 
     event.dataTransfer.files.length == 0)
        return;

, но он не перехватывает папки.