Caricamento file con trascinamento

Question

Sto utilizzando il caricamento di file nella mia applicazione Web utilizzando il tag html <input type="file" />. La mia funzionalità funziona bene con la scelta di un file dal selettore file e l'invio del file, tuttavia ora voglio caricare un file su trascinamento eventi, ovvero l'utente trascina un file da qualche posizione sul suo computer e quando lo rilascia in un particolare sezione nella mia pagina web, il file inizia a caricare.

Fino ad ora sono riuscito a leggere i file dall'evento goccia a

function drop(evt) 
    { 
     evt.stopPropogation(); 
      evt.preventDefault(); 

     if (containsFiles(evt)) 
     { 
     var files = evt.dataTransfer.files; 
     var count = files.length; 

     // Only call the handler if 1 or more files was dropped. 
     if (count > 0) 
      // upload files 
     } 
     } 
    } 

ma come faccio a caricare i file? Non posso modificare il valore del tipo di input = file per motivi di sicurezza. Quindi cosa posso fare per passare questi file al mio servlet?

Answer 1

Devi usare FormData (attenzione di supporto IE).

Quando goccia accade è necessario creare formdata oggetto, e aggiungere dati in esso, quindi POST che si formano al tuo URL. È il metodo asincrono e non ricaricherà la tua pagina.

function drop(evt) { 
    evt.stopPropogation(); 
    evt.preventDefault(); 

    var files = evt.dataTransfer.files; 
    if (files.length > 0) { 
    var form = new FormData(); 

    for(var i = 0; i < files.length; ++i) { 
     var file = evt.dataTransfer.files[i]; 
     form.append('image_' + i, file, file.name); 
    } 

    var req = new XMLHttpRequest(); 
    req.open('POST', '/pathToPostData', true); 
    req.onload = function(evt) { 
     console.log(req.responseText); 
    } 
    req.send(form); 
    } 
} 

Attenzione che ho provato solo in Chrome e Firefox, IE9 probabilmente non funzionerà, ma IE10 dovrebbe, se si prova, ci faccia sapere per favore.

Answer 2

credo si desidera qualcosa in artisti del calibro di Dropzone.js

non l'ho ancora provato, ma è una libreria che consente un facile drag-and-drop dei file da un sito web che è in esecuzione di esso, v3.0 arriva senza bisogno di usare jQuery.