Datei drag-und-drop-Ereignis in jquery

Kam ich über diese Frage während der recherche einige AJAX-file-upload-Verfahren.

Erstellte ich ein drag-and-drop-upload-Skript heute (die immer noch im proof-of-concept-Phase, aber heres die grundlegenden Schritte, die ich nahm.

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

 }

nun können Sie senden formData-Verarbeitung durch ein php-Skript, oder was auch immer Sie verwenden möchten. Ich habe nicht die Verwendung von jquery in meinem Skript, da es eine Menge Probleme mit, so schien es einfacher zu verwenden regelmäßige xhr. Hier ist das 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);

InformationsquelleAutor Paul Mulgrew