Evento de arrastrar y soltar archivo en jquery

Question

Estoy intentando encontrar una forma de permitir a los usuarios arrastrar y soltar archivos individuales en un área de mi página que luego se puede enviar junto con todos mis otros datos de formulario.

En mi investigación, he encontrado varias secuencias de comandos de carga "arrastrar y soltar", pero todas lo hacen, demasiado. Deseo manejar la carga real y proporcionar una forma para que los usuarios carguen archivos sin presionar el botón browse.

¿Hay algún evento en jquery (o algo similar) que deba estar buscando?

¡Cualquier ayuda es muy apreciada!

Answer 1

Plupload es un plugin de jQuery para cargar archivos múltiples y tiene HTML 5 arrastrar/soltar desde el escritorio compatible. Es fácil de configurar, compruebe http://www.plupload.com/example_queuewidget.php

Si no desea que la función de publicación, revisa el siguiente:

(arrastrar y soltar desde el escritorio y almacenar en el almacenamiento local) http://jsdo.it/hirose31/7vBK

(jQuery FileDrop - HTML5 arrastrar los archivos) https://github.com/weixiyen/jquery-filedrop

(HTML5) http://www.html5rocks.com/en/features/file, http://xquerywebappdev.wordpress.com/2010/05/21/drag-n-drop-from-desktop-jquery-plugin/

Answer 2

me encontré con esta pregunta, mientras que la investigación de algunas técnicas de carga de archivos de AJAX.

he creado un script de carga de arrastrar y soltar hoy (aún en su etapa de prueba de concepto, pero heres los pasos básicos que tomé.

$('drag-target-selector').on('drop', function(event) { 

//stop the browser from opening the file 
event.preventDefault(); 

//Now we need to get the files that were dropped 
//The normal method would be to use event.dataTransfer.files 
//but as jquery creates its own event object you ave to access 
//the browser even through originalEvent. which looks like this 
var files = event.originalEvent.dataTransfer.files; 

//Use FormData to send the files 
var formData = new FormData(); 

//append the files to the formData object 
//if you are using multiple attribute you would loop through 
//but for this example i will skip that 
formData.append('files', files[0]); 

} 

ahora puede enviar FormData para ser procesado por un script php o cualquier otra cosa que desee utilizar. yo no usar jQuery en mi guión, ya que hay una gran cantidad de problemas con él parecía más fácil de usar xhr regular. Aquí es que el código

var xhr = new XMLHttpRequest(); 
    xhr.open('POST', 'upload.php'); 
    xhr.onload = function() { 
      console.log(xhr.responseText); 

    }; 


    xhr.upload.onprogress = function(event) { 
      if (event.lengthComputable) { 
        var complete = (event.loaded/event.total * 100 | 0); 
        //updates a <progress> tag to show upload progress 
        $('progress').val(complete); 

      } 
    }; 

xhr.send(formData);