Glisser et déposer un fichier dans jquery

Je suis tombé sur cette question lors de la recherche AJAX upload de fichier techniques.

J'ai créé un glisser-déposer script d'upload aujourd'hui (il est toujours en phase de preuve de concept mais voici les étapes de base que j'ai pris.

$('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]);

 }

maintenant, vous pouvez envoyer formData pour être traitées par un script php ou autre chose que vous souhaitez utiliser. Je n'ai pas utiliser jquery dans mon script car il y a beaucoup de problèmes avec elle, il semblait plus facile à utiliser régulièrement xhr. Ici, c'est que le code

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);