IE10 не похоже на событие drop при отбрасывании файла

Question

У меня есть простое веб-приложение, которое использует filerader api в HTML5 для принятия загрузки файлов с помощью перетаскивания.

При перетаскивании файла на веб-страницу будет происходить правильное событие перетаскивания, но когда я удаляю файл, IE просто открывает его, а не позволяет JS обрабатывать его.

Код капли очень проста:

this.addEventListener("drop", function(event) { 
event.stopPropagation(); 
event.preventDefault(); 
Self.drop(event); //this event is not hit. IE just opens the file! 
}, false); 

Это конкретное ограничение IE10 или я мог бы сделать что-то не так?

Благодаря

Answer 1

Вы хотите также слушать dragenter и dragover событий и предотвратить их поведение по умолчанию. Вы также хотите предотвратить поведение по умолчанию в обработчике событий drop.

Например, вы можете захотеть сделать что-то вроде этого ...

var $dropArea = $("#drop-area"); 

$dropArea.on({ 
    "drop" : makeDrop, 
    "dragenter": ignoreDrag, 
    "dragover": ignoreDrag 
}); 

function ignoreDrag(e) { 
    e.preventDefault(); 
} 

function makeDrop(e) { 
    var fileList = e.originalEvent.dataTransfer.files, 
     fileReader; 

    e.preventDefault(); 
    if (fileList && fileList.length > 0) { 
     fileReader = new FileReader(); 
     fileReader.onloadend = handleReaderOnLoadEnd($("<img />")); 
     fileReader.readAsDataURL(fileList[ 0 ]); 
    } 
} 

function handleReaderOnLoadEnd($image) { 
    return function(event) { 
     $image.attr("src", this.result) 
      .addClass("small") 
      .appendTo("#drop-area"); 
    }; 
} 

Вы можете найти рабочий пример в этом JSFiddle http://jsfiddle.net/qsyNW/

Примечание: Вы не должны использовать JQuery с этим как я. Однако, если вы используете jQuery, тогда вам нужно будет указать e.originalEvent внутри обработчика события drop, чтобы попасть на dataTransfer.files.