HTML5, JavaScript: Arrastrar y soltar el archivo desde la ventana externa (Windows Explorer)

Question

¿Puedo pedir un buen ejemplo de trabajo de HTML5 File Drag and Drop implementación? El código fuente debería funcionar si se realiza la función de arrastrar y soltar desde una aplicación externa (Windows Explorer) a la ventana del navegador. Debería funcionar en tantos navegadores como sea posible.

Me gustaría pedir un código de muestra con una buena explicación. No deseo utilizar bibliotecas de terceros, ya que tendré que modificar el código de acuerdo con mis necesidades. El código debe basarse en HTML5 y JavaScript. No deseo usar JQuery.

Pasé todo el día buscando una buena fuente de material, pero sorprendentemente, no encontré nada bueno. Los ejemplos que encontré funcionaron para Mozilla pero no funcionaron para Chrome.

Answer 1

Este enlace explica mi pregunta en bastante detalle:

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

Answer 2

Mire en el evento ondragover. Simplemente podría tener un interior de div que esté oculto hasta que el evento ondragover desencadene una función que muestre el div con el, permitiendo que el usuario arrastre y suelte el archivo. Tener una declaración onchange en el te permitirá llamar automáticamente a una función (como cargar) cuando se agrega un archivo a la entrada. Asegúrese de que la entrada permita múltiples archivos, ya que no tiene control sobre cuántos van a tratar de arrastrar en el navegador.

Answer 3

Aquí es un ejemplo simple muerto. Muestra un cuadrado rojo. Si arrastra una imagen sobre el cuadrado rojo, se lo agrega al cuerpo. Confirmé que funciona en IE11, Chrome 38 y Firefox 32. Consulte el artículo Html5Rocks para obtener una explicación más detallada.

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>