Funzionalità caricamento immagine javery drag-and-drop

Question

Sto provando a codificare il mio semplice script di caricamento di immagini AJAX tramite jQuery. Ho trovato alcuni plugin ma sono troppo personalizzati per ciò che è necessario e non riesco a far funzionare correttamente nessuno di essi.

Voglio solo in qualche modo rilevare quando l'utente trascina e rilascia un'immagine nella pagina. Da lì sono sicuro che non è difficile caricare quei dati e spostarsi in una directory/cache/e consentire ulteriori opzioni ..

ma in questo momento sono totalmente bloccato con la funzionalità di trascinamento/rilascio. Letteralmente non ho idea di come dovrei avvicinarmi a questo. Che tipo di gestore di eventi è necessario? Avrò bisogno di codice personalizzato per il mio gestore di eventi? Qualunque consiglio sarebbe più che gradito

Answer 1

Che tipo di gestore eventi è necessario?

Drag'n'drop richiede un browser HTML5, ma è quasi tutto ora.

Suggerirei di non iniziare da zero in quanto è necessario un bel po 'di codice. Mi piace molto questo wrapper che lo implementa come plugin jQuery.

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

Dopo aver definito un elemento nel documento con div class, è possibile inizializzare ad accettare file sceso 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 
     }); 

Il bit della pagina web che accetta arrivi ha questo HTML.

goccia

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

</div> 

Il file funziona sul esterno <div> ma è bello per fare un bel bersaglio grosso che dice 'goccia qui' in modo che gli utenti non sono confusi su dove hanno bisogno di rilasciare il file.

Answer 2

Probabilmente troppo tardi. Ma dovresti fare il checkout http://www.dropzonejs.com/