web-dev-qa-db-fra.com

DropzoneJS: Comment obtenir une réponse PHP après le succès du téléchargement?

J'essaie d'implémenter Dropzone sur mon site. Je veux écouter l'événement "succès", puis prendre la réponse du serveur et ajouter des informations à un formulaire sur la même page que DropZone une fois le téléchargement terminé.

les informations que je veux obtenir dans la réponse du serveur sont un lien direct vers le fichier.

le site Web de dropzone: http://www.dropzonejs.com/

le site de mon projet:

http://37.34.62.131/test/

donc je l'ai terminé dans une version plus ancienne de mon projet mais je ne peux pas comprendre comment le faire avec dropzone.js

exemple de travail:

http://37.34.62.131/test/uploader%201.0/

ce que j'essaie de faire, c'est lorsqu'un fichier a été téléchargé, je veux obtenir la réponse php sur la même page avec les liens de téléchargement comme indiqué ci-dessous.

je peux également vous envoyer mes codes sources afin que vous puissiez vous chercher.

mon code php que je veux voir dans la réponse:

        print '<h2>Picture Uploaded Successfuly!!!!</h2> <p id="codes">

      <img src="'.$imgurl.'" height="300" alt="Uploaded Picture" >
        <label for="codebb">BBCode:</label>
        <input type="text" id="codebb" value="[URL='.$siteurl.'][IMG]'.$dlurl.'[/IMG][/URL]" onclick="javascript:this.focus();this.select();" readonly="true" /><br />
        <label for="codehtml">HTML Code: </label>
        <input type="text" id="codehtml" value=\'&lt;a href="'.$siteurl.'"&gt;&lt;img src="'.$dlurl.'" alt="'.$alt.'" /&gt;&lt/a&gt;\' onclick="javascript:this.focus();this.select();" readonly="true" /><br />
        <label for="codedirect">Direct Link:</label>
        <input type="text" id="codedirect" value="'.$dlurl.'" onclick="javascript:this.focus();this.select();" readonly="true" /></p>';
        echo ".$newname";

Quelqu'un peut-il m'aider à comprendre ce qui me manque?

javascriptphpdropzone.js
36
Patrick Falize

En regardant votre site Web, il semble que vous ayez pu résoudre le problème.

Quoi qu'il en soit, c'est pour quelqu'un qui pourrait encore chercher. Vous devez ajouter le succès de la fonction avec deux paramètres. Le premier paramètre renvoyé est toujours un fichier, le second est la réponse. Échantillon:

$(function() {
        Dropzone.options.uiDZResume = {
            success: function(file, response){
                alert(response);
            }
        };
    });
73
Ichibanpanda

J'ai eu quelques problèmes avec dropzone, mais j'ai trouvé cette solution:

new Dropzone("#myDropzone", { 
    maxFilesize: 2, // MB
    init: function() {
        this.on("success", function(file, responseText) {
            console.log(responseText);
        });
    }
});
24
Braian Mellor

La réponse validée n'a pas fonctionné pour moi. Cela fait:

$(".mydrop").dropzone({ 
    url: upload_url, 
    success : function(file, response){
        console.log(file);
        console.log(response);
    }
});

Et du côté php:

echo json_encode($whateverouwant);
die();
8
Reign.85

Rien de ce qui précède n'a fonctionné pour moi, mais cela ...

<script>

    Dropzone.autoDiscover = false;
$(function(){

    uploader = new Dropzone(".dropzone",{
        url: "http://locahost/upload",
        paramName : "uploadedFiles",
        uploadMultiple :false,
        acceptedFiles : "image/*,video/*,audio/*",
        addRemoveLinks: true,
        forceFallback: false,
        maxFilesize:1000,
        parallelUploads: 100,

    });//end drop zone

  uploader.on("success", function(file,response) {
   console.log(response)
  });



});//end jq
</script>
3
razzbee

Notez qu'il y a un problème avec les téléchargements en bloc et ne récupérez jamais la réponse du serveur en cas de succès. Toutes les réponses précédentes ne fonctionneront pas dans ce cas. La solution pourrait être en analysant manuellement la réponse XHR comme suit:

const galleryZone = new Dropzone(".dropzone-gallery", {
    url: your_upload_url_in_here,
    chunking: true,
    forceChunking: true,
    chunkSize: 2000000,
    success: (file, response) => {
        console.log(JSON.parse(file.xhr.response));
    }
});

Sinon, vous pouvez vérifier le problème dans le référentiel de Dropzone ici https://gitlab.com/meno/dropzone/issues/51#note_4755317

2
Atanas Ginev

Mais si j'utilise ce code, je dois supprimer la classe dropzone du formulaire. Sinon, il générera cette erreur.

throw new Error("Dropzone already attached.");
---------------------------------------------
new Dropzone("#myDropzone", { 
    maxFilesize: 2, // MB
    init: function() {
        this.on("success", function(file, responseText) {
            console.log(responseText);
        });
    }
});
1
Vinay Sikarwar