llamar - HTML5, JavaScript: arrastrar y soltar archivo desde la ventana externa(Windows Explorer)

llamar javascript desde html

Question

¿Puedo pedir amablemente un buen ejemplo de trabajo de la implementación de arrastrar y soltar archivos HTML5 ? 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 estar basado 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

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 2

Este enlace explica mi pregunta con bastante detalle:

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

Answer 3

Aquí hay un ejemplo muerto-simple. 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>