web-dev-qa-db-fra.com

Comment précharger des images dans dropzone.js

J'ai une instance dropzone.js sur une page Web avec les options suivantes:

autoProcessQueue:false
uploadMultiple:true
parallelUploads:20
maxFiles:20

Il est instancié par programme, car il fait partie d'une forme plus large. Je l'ai configuré pour traiter la file d'attente lorsque le formulaire est soumis.

L'objectif est que mes utilisateurs puissent utiliser la zone de dépôt pour gérer les images d'un élément, donc lorsque je charge ma vue `` modifier/mettre à jour '' pour un élément, je voudrais précharger la zone de dépôt avec les images qui avaient été précédemment téléchargé pour cet élément. Existe-t-il un bon moyen de l'implémenter afin que les éléments déjà présents ne soient pas re-téléchargés lorsqu'ils soumettent leurs modifications à la liste d'images?

previewdropzone.jspreloading
28
ralbatross

La bonne façon de le faire est d'utiliser la méthode .emit fournie par on dropzone js pour ajouter un fichier et une vignette pour précharger les images à partir du serveur. Voir l'exemple de code ci-dessous. Tiré de https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server

// Create the mock file:
var mockFile = { name: "Filename", size: 12345 };

// Call the default addedfile event handler
myDropzone.emit("addedfile", mockFile);

// And optionally show the thumbnail of the file:
myDropzone.emit("thumbnail", mockFile, "/image/url");

La méthode .emit de dropzone déclenchera la fonction init et si vous avez un rappel d'événement addedfile écrit pour elle. par exemple. J'utilise l'événement addfile ajouter le bouton supprimer et également la fonctionnalité de suppression d'image attachée.

37
microchip78

Dropzone est tellement fort et génial que vous pouvez tout faire.
Étapes à suivre ->

1) Tout d'abord, vous devrez créer un script côté serveur qui obtiendra tous les noms de fichiers et leur taille et les enverra en réponse json.
code PHP:

  foreach($myitemfiles as $file){ //get an array which has the names of all the files and loop through it 
        $obj['name'] = $file; //get the filename in array
        $obj['size'] = filesize("uploadsfolder/".$file); //get the flesize in array
        $result[] = $obj; // copy it to another array
      }
       header('Content-Type: application/json');
       echo json_encode($result); // now you have a json response which you can use in client side

2) Vous pouvez maintenant utiliser la réponse pour afficher les fichiers téléchargés.Écrivez le code ci-dessous dans la fonction dropzone init
Code Javascript:

  init: function() {

      var thisDropzone = this;

        $.getJSON('get_item_images.php', function(data) { // get the json response

            $.each(data, function(key,value){ //loop through it

                var mockFile = { name: value.name, size: value.size }; // here we get the file name and size as response 

                thisDropzone.options.addedfile.call(thisDropzone, mockFile);

                thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "uploadsfolder/"+value.name);//uploadsfolder is the folder where you have all those uploaded files

            });

        });
}

Remarque: ne prenez pas le chemin de l'url du fichier entier dans filename, prenez simplement le nom de fichier lui-même.
Cela marche

28
Vishal Nair