web-dev-qa-db-fra.com

Téléchargement de fichiers par glisser-déposer

J'ai donc du mal à trouver ce que je recherche et comment le mettre en œuvre.

J'ai un élément de base PHP uploader de fichiers fonctionne, en ce sens qu'un utilisateur appuie sur un bouton de téléchargement personnalisé, sélectionne un fichier puis utilise JS, il vérifie une modification (c'est-à-dire que l'utilisateur sélectionne un fichier) puis soumet le formulaire qui télécharge bien l'image.

Ce que je veux aussi maintenant, c'est une zone de glisser-déposer pour télécharger. Ainsi, l'utilisateur peut faire glisser une image depuis son explorateur de fichiers et la déposer à un endroit désigné (pas la page entière), puis une fois que cette image a été supprimée pour que le formulaire se soumette automatiquement avec son image et utilise la même PHP.

Est-ce possible et réaliste?

phpjqueryhtmluploaddrag-and-drop
15
Tenatious

Ceci est absolument réaliste et possible sans utiliser de plugin tiers.

Les extraits suivants devraient vous donner une idée de la façon dont cela pourrait fonctionner:

Zone de dépôt 

$(".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;
});

the processFileUpload () - Méthode: 

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

 }

exemple de formulaire 

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

N'hésitez pas à utiliser quelque chose comme ça comme point de départ. Le support de navigateur de ceci vous pouvez trouver ici http://caniuse.com/#feat=xhr2

Bien sûr, vous pouvez ajouter tous les extras que vous souhaitez comme la barre de progression, l'aperçu, l'animation ...

33
wildhaber