Przeciągnij i upuść wydarzenie javascript

Question

Jestem facetem z java, próbującym swoich sił w javascript i potrzebuję pomocy. Natknąłem się na niesamowity samouczek dotyczący przesyłania zdjęć tutaj Mozilla Tutorial i potrzebuję pomocy w ustaleniu tego. Obecnie pracuję nad funkcją przesyłania obrazów metodą "przeciągnij i upuść". Za każdym razem, gdy przeciągam obraz na mój obszar, mysz zmienia kolor na zielony, dzięki czemu jest aktywowany. Ale kiedy zwolnię, powinien wysłać mi alert, który mówi, że znaleziono jedno zdjęcie. Jednak zawsze po prostu alarmuje 0. Więc rozmiar tablicy wynosi 0. Jakieś pomysły? Dzięki za spojrzenie. Co Próbowałem bez powodzenia ...

1. Kopiowanie i wklejanie kodu z samouczka w moim pliku javascript dokładnie
2. Przenoszenie kodu, aby dodać słuchaczy poza funkcją i do okna onload
3. Każda przeglądarka mam

...

function toggleStrideMedia() 
{ 
    if(getDisplay("strideMediaWrapper") == "" || getDisplay("strideMediaWrapper") == "none") 
    { 
     show("strideMediaWrapper"); 

     getElement("strideMediaDropZone").addEventListener("dragenter", dragenter, false); 
     getElement("strideMediaDropZone").addEventListener("dragover", dragover, false); 
     getElement("strideMediaDropZone").addEventListener("drop", drop, false); 

    } 
    else 
    { 
     hide("strideMediaWrapper"); 
    } 
} 

function dragenter(e) 
{ 
    e.stopPropagation(); 
    e.preventDefault(); 
} 

function dragover(e) 
{ 
    e.stopPropagation(); 
    e.preventDefault(); 
} 

function drop(e) 
{ 
    e.stopPropagation(); 
    e.preventDefault(); 

    var dt = e.dataTransfer; 
    var files = dt.files; 

    // THIS SHOULD BE GIVING ME A ONE BUT IT ALWAYS GIVES ME A ZERO INSTEAD 
    alert(files.length); 

    handleFiles(files); 
} 

.

UPDATE - Fiddle Wyniki

Answer 1

UPDATE
Rzeczywisty problem, okazało się, że jeśli spróbujesz przeciągnąć obrazy bezpośrednio z karty przeglądarki, jeden internetowej do tej strony internetowej w oparciu przeciągnij i upuść interfejs, zdarzenie uruchomi się, ale żadne pliki nie zostaną usunięte. Pytający zauważyć ten problem na OSX i byłem w stanie powtórzyć to samo zachowanie w systemie Windows 7.

---

Bez widząc HTML, to trudno powiedzieć, co mieli trudności z. Jeśli element ondragover/ondragenter nie został poprawnie skonfigurowany, upuszczenie nie zadziała, ale w ogóle nie zobaczysz alertu, zobaczysz, że przeglądarka renderuje obraz z lokalnego systemu plików. Oznacza to również, że prawie na pewno skutecznie dodajesz zdarzenie drop do właściwego elementu.

Spróbuj Fiddle i sprawdzić, czy to działa dla Ciebie: http://jsfiddle.net/qey9G/4/

HTML

<div> 
     <div id="dropzone" style="margin:30px; width:500px; height:300px; 
            border:1px dotted grey;"> 
       Drag & drop your file here... 
     </div> 
</div> 

JavaScript

var dropzone = document.getElementById("dropzone"); 

dropzone.ondragover = dropzone.ondragenter = function(event) { 
    event.stopPropagation(); 
    event.preventDefault(); 
} 

dropzone.ondrop= function drop(e) 
{ 
    e.stopPropagation(); 
    e.preventDefault(); 

    var dt = e.dataTransfer; 
    var files = dt.files; 

    alert(files.length); 
}