Drag & Drop-Datei hochladen

Question

So habe ich ein wenig zu kämpfen, um zu finden, was ich suche und wie man es implementiert.

Ich habe eine grundlegende PHP-Datei-Uploader funktioniert, in dem ein Benutzer eine benutzerdefinierte Upload-Taste drückt, wählt eine Datei und dann mit JS, prüft es für eine Änderung (dh der Benutzer eine Datei auswählen) und sendet dann das Formular der das Bild hochlädt.

Was ich jetzt auch will, ist ein Drag & Drop zum Upload-Bereich. So kann der Benutzer ein Bild aus seinem Dateiexplorer ziehen und an einer bestimmten Stelle ablegen (nicht auf der ganzen Seite). Sobald das Bild gelöscht wurde, wird das Formular automatisch mit dem Bild übergeben und die gleiche PHP-Verarbeitung verwendet.

Ist das möglich und realistisch?

Answer 1

Dies ist absolut realistisch und ohne die Verwendung eines Drittanbieter-Plugins möglich.

Folgende Snippets sollten Sie eine Vorstellung davon, wie es funktionieren könnte:

Ablegebereich

$(".drop-files-container").bind("drop", function(e) { 
    var files = e.originalEvent.dataTransfer.files; 
    processFileUpload(files); 
    // forward the file object to your ajax upload method 
    return false; 
}); 

die processFileUpload() - Methode:

function processFileUpload(droppedFiles) { 
     // add your files to the regular upload form 
    var uploadFormData = new FormData($("#yourregularuploadformId")[0]); 
    if(droppedFiles.length > 0) { // checks if any files were dropped 
     for(var f = 0; f < droppedFiles.length; f++) { // for-loop for each file dropped 
      uploadFormData.append("files[]",droppedFiles[f]); // adding every file to the form so you could upload multiple files 
     } 
    } 

// the final ajax call 

     $.ajax({ 
     url : "upload.php", // use your target 
     type : "POST", 
     data : uploadFormData, 
     cache : false, 
     contentType : false, 
     processData : false, 
     success : function(ret) { 
       // callback function 
     } 
     }); 

} 

Formularbeispiel

<form enctype="multipart/form-data" id="yourregularuploadformId"> 
    <input type="file" name="files[]" multiple="multiple"> 
</form> 

Fühlen Sie sich frei, etwas wie diesen als Ausgangspunkt zu verwenden. Der Browser unterstützt diese können Sie hier http://caniuse.com/#feat=xhr2

Natürlich finden Sie Extras hinzufügen, können Sie wie Fortschrittsbalken wünschen, Vorschau, Animation ...

Answer 2

Bitte schauen Sie sich dieses jQuery Plugin an! Mit Ajax-Datei-Upload und mehr: http://blueimp.github.com/jQuery-File-Upload/

Datei-Upload-Widget mit mehrere Dateiauswahl, Drag & Drop-Unterstützung &, Fortschrittsbalken und Vorschaubild für jQuery. Unterstützt cross-domain, Chunked und wiederaufnehmbare Dateiuploads und clientseitige Bildgrößenanpassung. Funktioniert mit jeder serverseitigen Plattform (PHP, Python, Ruby on Rails, Java, Node.js, Go usw.), die Standard-HTML-Formular-Datei-Uploads unterstützt.