HTML5, JavaScript: przeciągnij i upuść plik z zewnętrznego okna (Eksplorator Windows)

Question

Czy mogę prosić o dobry przykład zastosowania implementacji przeciągania i upuszczania pliku HTML5? Kod źródłowy powinien działać, jeśli przeciągnięcie i upuszczenie jest wykonywane z zewnętrznej aplikacji (Windows Explorer) do okna przeglądarki. Powinien działać na jak największej liczbie przeglądarek.

Chciałbym poprosić o przykładowy kod z dobrym wyjaśnieniem. Nie chcę korzystać z bibliotek stron trzecich, ponieważ będę musiał zmodyfikować kod zgodnie z moimi potrzebami. Kod powinien być oparty na kodzie HTML5 i JavaScript i. Nie chcę używać JQuery.

Spędziłem cały dzień szukając dobrego źródła materiału, ale zaskakująco, nie znalazłem nic dobrego. Przykłady, które znalazłem, działały w Mozilli, ale nie działały w Chrome.

Answer 1

Ten link wyjaśnia moje pytanie w ładnej szczegółach:

http://www.html5rocks.com/en/tutorials/file/dndfiles/

Answer 2

Obejrzyj wydarzenie ondragover. Może po prostu mieć wnętrze elementu div, który jest ukryty, dopóki zdarzenie ondragover nie uruchomi funkcji, która pokaże element div z tym, pozwalając użytkownikowi przeciągnąć i upuścić plik. Posiadanie deklaracji onchange pozwala na automatyczne wywołanie funkcji (np. Przesłanie), gdy plik zostanie dodany do danych wejściowych. Upewnij się, że dane wejściowe pozwalają na wiele plików, ponieważ nie masz żadnej kontroli nad tym, ile próbują przeciągnąć do przeglądarki.

Answer 3

Oto prosty przykład martwego. Pokazuje czerwony kwadrat. Jeśli przeciągasz obraz na czerwony kwadrat, dołącza go do ciała. Potwierdziłem, że działa on w IE11, Chrome 38 i Firefox 32. Bardziej szczegółowe wyjaśnienie znajdziesz w artykule Html5Rocks.

var dropZone = document.getElementById('dropZone'); 
 

 
// Optional. Show the copy icon when dragging over. Seems to only work for chrome. 
 
dropZone.addEventListener('dragover', function(e) { 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
    e.dataTransfer.dropEffect = 'copy'; 
 
}); 
 

 
// Get file data on drop 
 
dropZone.addEventListener('drop', function(e) { 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
    var files = e.dataTransfer.files; // Array of all files 
 

 
    for (var i=0, file; file=files[i]; i++) { 
 
     if (file.type.match(/image.*/)) { 
 
      var reader = new FileReader(); 
 

 
      reader.onload = function(e2) { 
 
       // finished reading file data. 
 
       var img = document.createElement('img'); 
 
       img.src= e2.target.result; 
 
       document.body.appendChild(img); 
 
      } 
 

 
      reader.readAsDataURL(file); // start reading the file data. 
 
     } 
 
    } 
 
});

<div id="dropZone" style="width: 100px; height: 100px; background-color: red"></div>