dropzone.js - comment faire quelque chose après le téléchargement de TOUS les fichiers
J'utilise dropzone.js pour ma solution de téléchargement de fichiers par glisser-déposer. Je suis coincé à quelque chose où je dois appeler une fonction après tout les fichiers sont téléchargés Dans ce cas,
Dropzone.options.filedrop = {
maxFilesize: 4096,
init: function () {
this.on("complete", function (file) {
doSomething();
});
}
};
doQuelque chose () sera appelé pour chaque fichier téléchargé. Comment puis-je appeler une fonction après le téléchargement de tous les fichiers?
EDIT: Il existe maintenant un événement queuecomplete que vous pouvez utiliser exactement à cette fin.
_ {Réponse précédente: _
La réponse de Paul B. fonctionne, mais une façon plus simple de le faire est de vérifier s'il reste des fichiers dans la file d'attente ou de la télécharger chaque fois qu'un fichier se termine. De cette façon, vous n’avez pas à suivre les fichiers vous-même:
Dropzone.options.filedrop = {
init: function () {
this.on("complete", function (file) {
if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
doSomething();
}
});
}
};
Il suffit d’utiliser queuecomplete, c’est la raison pour laquelle il est là et si simple. Consultez la documentation http://www.dropzonejs.com/
queuecomplete> Appelé lorsque le téléchargement de tous les fichiers de la file d'attente est terminé.
this.on("queuecomplete", function (file) {
alert("All files have uploaded ");
});
Il y a probablement un moyen (ou trois) de le faire ... cependant, je vois un problème avec votre objectif: comment savoir quand tous les fichiers ont été téléchargés? Pour reformuler d'une manière qui a plus de sens ... comment savez-vous ce que "tout" signifie? Selon la documentation, init est appelé lors de l'initialisation de Dropzone, puis vous configurez le gestionnaire d'événements complete pour qu'il fasse quelque chose lorsque chaque fichier téléchargé est terminé. Mais quel mécanisme donne-t-on à l'utilisateur pour permettre au programme de savoir quand il a abandonné tous les fichiers qu'il avait l'intention de supprimer? Si vous supposez qu'il effectuera une suppression par lots (c'est-à-dire, déposez-le sur Dropzone 2, quel que soit le nombre de fichiers, en une fois, en une seule action), le code suivant pourrait/pourrait éventuellement fonctionner:
Dropzone.options.filedrop = {
maxFilesize: 4096,
init: function () {
var totalFiles = 0,
completeFiles = 0;
this.on("addedfile", function (file) {
totalFiles += 1;
});
this.on("removed file", function (file) {
totalFiles -= 1;
});
this.on("complete", function (file) {
completeFiles += 1;
if (completeFiles === totalFiles) {
doSomething();
}
});
}
};
Fondamentalement, vous surveillez chaque fois que quelqu'un ajoute/supprime des fichiers de Dropzone, et gardez un compte dans les variables de fermeture. Ensuite, lorsque chaque téléchargement de fichier est terminé, vous incrémentez le compteur completeFiles progress, et voyez s'il correspond maintenant au totalCount que vous avez surveillé et mis à jour lorsque l'utilisateur a placé des éléments dans Dropzone. (Remarque: n'a jamais utilisé le plug-in/JS lib., Il est donc préférable de deviner ce que vous pourriez faire pour obtenir ce que vous voulez.)
Un événement 'queuecomplete' a été ajouté. Voir numéro 317 .
this.on("totaluploadprogress", function(totalBytes, totalBytesSent){
if(totalBytes == 100) {
//all done! call func here
}
});
Je vous ai voté parce que votre méthode est simple. Je n'ai apporté que quelques légères modifications, car parfois l'événement est déclenché même s'il n'y a pas d'octets à envoyer - sur ma machine, il l'a fait lorsque j'ai cliqué sur le bouton Supprimer d'un fichier.
myDropzone.on("totaluploadprogress", function(totalPercentage, totalBytesToBeSent, totalBytesSent ){
if(totalPercentage >= 100 && totalBytesSent) {
// All done! Call func here
}
});
En plus de la réponse de @ enyo lors de la recherche de fichiers en cours de téléchargement ou dans la file d'attente, j'ai également créé une nouvelle fonction dans dropzone.js afin de rechercher les fichiers dans un état ERROR (type, taille, etc.).
Dropzone.prototype.getErroredFiles = function () {
var file, _i, _len, _ref, _results;
_ref = this.files;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
file = _ref[_i];
if (file.status === Dropzone.ERROR) {
_results.Push(file);
}
}
return _results;
};
Et ainsi, le chèque deviendrait:
if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0 && this.getErroredFiles().length === 0) {
doSomething();
}
J'essayais de travailler avec ces solutions, mais cela ne fonctionnait pas… .. Mais plus tard, j'ai réalisé que la fonction n'était pas déclarée, aussi je surveille la page dropzone.com et prends l'exemple pour appeler des événements… __.Alors enfin travailler sur mon site . Pour ceux comme moi qui ne comprennent pas très bien JavaScript, je vous laisse l'exemple.
<script type="text/javascript" src="/js/dropzone.js"></script>
<script type="text/javascript">
// This example uses jQuery so it creates the Dropzone, only when the DOM has
// loaded.
// Disabling autoDiscover, otherwise Dropzone will try to attach twice.
Dropzone.autoDiscover = false;
// or disable for specific dropzone:
// Dropzone.options.myDropzone = false;
$(function() {
// Now that the DOM is fully loaded, create the dropzone, and setup the
// event listeners
var myDropzone = new Dropzone(".dropzone");
myDropzone.on("queuecomplete", function(file, res) {
if (myDropzone.files[0].status != Dropzone.SUCCESS ) {
alert('yea baby');
} else {
alert('cry baby');
}
});
});
</script>
La réponse acceptée n'est pas nécessairement correcte. queuecomplete sera appelé même si le fichier sélectionné est plus grand que la taille maximale du fichier.
L'événement à utiliser est successmultiple ou completemultiple.