HTML5, JavaScript: Arrastre y Suelte el archivo desde una ventana externa (Explorador de Windows)

Aquí hay un ejemplo simple. Muestra un cuadrado rojo. Si arrastra una imagen sobre el cuadrado rojo, la añade al cuerpo. He confirmado que funciona en IE11, Chrome 38, y Firefox 32. Vea el artículo HTML5Rocks para 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>

Busca en el evento ondragover. Simplemente podría tener un interior de un div que se oculta hasta que el evento ondragover dispara una función que mostrará el div con el en él, permitiendo así al usuario arrastrar y soltar el archivo. Tener una declaración onchange en el le permitiría llamar automáticamente a una función (como upload) cuando se agrega un archivo a la entrada. Asegúrese de que la entrada permite varios archivos, ya que no tiene control sobre cuántos van a tratar de arrastrar en el navegador.