Comment puis-je précharger des images dans dropzone.js
j'ai une dropzone.js exemple sur une page web avec les options suivantes:
autoProcessQueue:false
uploadMultiple:true
parallelUploads:20
maxFiles:20
elle est programmatiquement instanciée, car elle fait partie d'une forme plus grande. Je l'ai réglé pour traiter la file d'attente lorsque le formulaire est soumis.
Le but est que mes utilisateurs puissent utiliser la dropzone pour gérer les images d'un élément, donc quand je charge ma vue 'edit / update' pour un élément, j'aimerais précharger la dropzone avec les images qui ont été précédemment chargées pour cela article. Y a-t-il un bon moyen de mettre en œuvre cela pour que les éléments déjà présents ne soient pas rechargés lorsqu'ils soumettent leurs modifications à la liste des images?
2 réponses
Bonne façon de le faire est d'utiliser .emit method fourni par On dropzone JS pour ajouter un fichier et une vignette pour précharger les images 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 le bouton Ajouter un événement add supprimer et aussi supprimer attaché fonctionnalité de l'image.
Dropzone est si fort et génial que vous pouvez faire n'importe quoi dessus .
Les étapes à Suivre -- >
1)tout d'Abord, vous devrez créer un serveur de script côté qui
obtenez tous les noms de fichier et sa taille et envoyez-le comme réponse json.
PHP code:
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)Maintenant, vous pouvez utiliser la réponse pour afficher les fichiers téléchargés.Ecrire 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 tout le chemin de l'url du fichier dans filename prenez simplement le nom du fichier lui-même thats it .
Cela fonctionne