HTML5, JavaScript: trascinare e rilasciare il file dalla finestra esterna (Windows Explorer)

Question

Posso chiedere gentilmente un buon esempio operativo di HTML5 File Trascinare e rilasciare l'implementazione? Il codice sorgente dovrebbe funzionare se il trascinamento viene eseguito da un'applicazione esterna (Windows Explorer) alla finestra del browser. Dovrebbe funzionare su quanti più browser possibile.

Vorrei chiedere un codice di esempio con una buona spiegazione. Non desidero utilizzare librerie di terze parti, poiché dovrò modificare il codice in base alle mie esigenze. Il codice dovrebbe essere basato su HTML5 e JavaScript. Non desidero usare JQuery.

Ho trascorso l'intera giornata alla ricerca di una buona fonte di materiale, ma sorprendentemente, non ho trovato nulla di buono. Gli esempi che ho trovato funzionavano per Mozilla ma non funzionavano per Chrome.

Answer 1

Questo legame spiega la mia domanda in abbastanza particolare:

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

Answer 2

Esaminare l'evento ondragover. Potresti semplicemente avere un interno di un div che è nascosto fino a quando l'evento ondragover attiva una funzione che mostrerà il div al suo interno, consentendo così all'utente di trascinare e rilasciare il file. Avere una dichiarazione onchange sul consentirebbe di chiamare automaticamente una funzione (come il caricamento) quando un file viene aggiunto all'input. Assicurati che l'input consenta più file, poiché non hai il controllo su quanti tenteranno di trascinare nel browser.

Answer 3

Ecco un esempio morto semplice. Mostra un quadrato rosso. Se trascini un'immagine sul quadrato rosso, la aggiunge al corpo. Ho confermato che funziona in IE11, Chrome 38 e Firefox 32. Vedi l'articolo Html5Rocks per una spiegazione più dettagliata.

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>