Wygląda na to, że IE10 nie podoba się zdarzeniu upuszczającemu plik

Question

Mam prostą aplikację internetową, która wykorzystuje api filereadera w HTML5, aby akceptować przesyłanie plików przez przeciąganie i upuszczanie.

Po przeciągnięciu pliku na stronę, odpowiednie zdarzenie przeciągania zostanie uruchomione, ale kiedy upuszczę plik IE po prostu go otworzy, zamiast pozwolić JS go obsłużyć.

Kod spadek jest bardzo prosty:

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

Jest to specyficzny ograniczenie IE10 lub mogę robić coś złego?

Dzięki

Answer 1

będzie chciał też słuchać wydarzeń dragenter i dragover i zapobiec ich domyślne zachowanie. Będziesz także chciał zapobiec domyślnemu zachowaniu w obsłudze zdarzenia drop.

Na przykład może chcesz zrobić coś takiego ...

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"); 
    }; 
} 

Można znaleźć pracy przykład w tym JSFiddle http://jsfiddle.net/qsyNW/

Uwaga: Nie musisz korzystać z tego jQuery Jak ja zrobiłem. Jeśli jednak użyjesz jQuery, musisz odwołać się do e.originalEvent wewnątrz programu obsługi zdarzeń drop, aby uzyskać numer dataTransfer.files.