jQuery Funcionalidad de carga de imágenes arrastradas y arrastradas

Question

Estoy intentando codificar mi propio script de carga de imágenes AJAX mediante jQuery. He encontrado algunos complementos, pero están demasiado personalizados para lo que se necesita, y no puedo conseguir que ninguno de ellos funcione correctamente.

Solo quiero de alguna manera detectar cuando el usuario arrastra y suelta una imagen en la página. A partir de ahí, estoy seguro de que no es difícil cargar esos datos y moverlos a un directorio/cache/y permitir más opciones ...

pero ahora estoy totalmente atascado con la funcionalidad de arrastrar y soltar. Literalmente, no tengo idea de cómo debería abordar esto. ¿Qué tipo de controlador de eventos se necesita? ¿Tendré que personalizar mi propio controlador de eventos? Cualquier consejo sería más que apreciado

Answer 1

¿Qué tipo de controlador de eventos se necesita?

Drag'n'drop requiere un navegador HTML5, pero eso es prácticamente lo mismo ahora.

Recomiendo no comenzar de cero ya que hay bastante código necesario. Me gusta bastante este envoltorio que lo implementa como un plugin jQuery.

http://www.github.com/weixiyen/jquery-filedrop

Después de definir un elemento en el documento con div class, se puede inicializar a aceptar caído archivos con:

function fileSetUploadPercent(percent, divID){ 

    var uploadString = "Uploaded " + percent + " %"; 

    $('#'.divID).text(uploadString); 
} 
function fileUploadStarted(index, file, files_count){ 

    var divID = getDivID(index, file); 

    createFileUploadDiv(divID);  //create the div that will hold the upload status 

    fileSetUploadPercent(0, divID); //set the upload status to be 0 
} 

function fileUploadUpdate(index, file, currentProgress){ 

    //Logger.log("fileUploadUpdate(index, file, currentProgress)"); 

    var string = "index = " + index + " Uploading file " + file.fileName + " size is " + file.fileSize + " Progress = " + currentProgress; 
    $('#status').text(string); 

    var divID = getDivID(index, file); 
    fileSetUploadPercent(currentProgress, divID); 
} 

function fileUploadFinished(index, file, json, timeDiff){ 

    var divID = getDivID(index, file); 
    fileSetUploadPercent(100, divID); 

    if(json.status == "OK"){ 
     createThumbnailDiv(index, file, json.url, json.thumbnailURL); 
    } 
} 



function fileDocOver(event){ 
    $('#fileDropTarget').css('border', '2px dashed #000000').text("Drop files here"); 
} 
$(".fileDrop").filedrop({ 

      fallback_id: 'fallbackFileDrop', 
      url: '/api/upload.php', 
      // refresh: 1000, 
      paramname: 'fileUpload', 
      // maxfiles: 25,   // Ignored if queuefiles is set > 0 
      maxfilesize: 4,   // MB file size limit 
      // queuefiles: 0,   // Max files before queueing (for large volume uploads) 
      // queuewait: 200,   // Queue wait time if full 
      // data: {}, 
      // headers: {}, 
      // drop: empty, 
      // dragEnter: empty, 
      // dragOver: empty, 
      // dragLeave: empty, 
      // docEnter: empty, 
      docOver: fileDocOver, 
     // docLeave: fileDocLeave, 
      // beforeEach: empty, 
      // afterAll: empty, 
      // rename: empty, 
      // error: function(err, file, i) { 
      // alert(err); 
      // }, 
      uploadStarted: fileUploadStarted, 
      uploadFinished: fileUploadFinished, 
      progressUpdated: fileUploadUpdate, 
      //  speedUpdated 
     }); 

El bit de la página web que acepta archivos tiene este código HTML.

gota

<div class='fileDrop'> 
Upload a file by dragging it. 
<span id='fileDropTarget'/> 

</div> 

El archivo funciona en el exterior <div> pero es bueno para hacer un blanco grande y bonita que dice 'Colocar aquí' para que los usuarios no están confundidos acerca de dónde tienen que soltar el archivo.

Answer 2

Probablemente demasiado tarde. Pero debe pagar http://www.dropzonejs.com/