dropzone.js-comment faire quelque chose après que tous les fichiers sont téléchargés
J'utilise dropzone.js pour ma solution de téléchargement de fichiers glisser-déposer. Je suis coincé à quelque chose où j'ai besoin d'appeler une fonction après tous les les fichiers sont téléchargés. Dans ce cas,
Dropzone.options.filedrop = {
maxFilesize: 4096,
init: function () {
this.on("complete", function (file) {
doSomething();
});
}
};
DoSomething() sera appelé pour chaque fichier qui a été téléchargé. Comment puis-je appeler une fonction après que tous les fichiers sont téléchargés?
9 réponses
EDIT: Il est maintenant un queuecomplete de l'événement que vous pouvez utiliser pour exactement cet effet.
réponse Précédente:
La réponse de Paul B. fonctionne, mais un moyen plus facile de le faire est de vérifier s'il y a toujours des fichiers dans la file d'attente ou de les télécharger à la fin d'un fichier. De cette façon, vous n'avez pas à garder une trace des 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 ce que c'est là pour et c'est tellement si simple. Vérifiez les documents http://www.dropzonejs.com/
Queuecomplete > appelé lorsque tous les fichiers de la file d'attente ont terminé le téléchargement.
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 savez-vous lorsque tous les fichiers ont été téléchargés? À en reformuler d'une manière qui fait plus de sens... comment savez-vous ce que "tous" signifie? Selon la documentation, init est appelé à l'initialisation de la Dropzone elle-même, puis vous configurez le gestionnaire d'événements complete pour faire quelque chose lorsque chaque fichier téléchargé est terminé. Mais, quel mécanisme est donné à l'utilisateur pour permettre au programme de savoir quand il a laissé tomber tous les fichiers qu'il a l'intention de laisser tomber? Si vous supposez qu'il / elle va faire un dépôt par lots (c'est-à-dire déposer sur la Dropzone 2-quel que soit le nombre de fichiers, à la fois, dans une action de dépôt), alors le code suivant pourrait / devrait 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 regardez chaque fois que quelqu'un ajoute/supprime des fichiers de la 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 de progression completeFiles var, et voyez s'il est maintenant égal à totalCount que vous avez regardé et mis à jour lorsque l'Utilisateur a placé des choses dans la Dropzone. (Note: jamais utilisé le plug-in/JS lib., donc le mieux est 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é car votre méthode est simple. Je n'ai fait que quelques légères modifications car parfois l'événement se déclenche même s'il n'y a pas d'octets à envoyer - sur ma machine, il l'a fait quand j'ai cliqué sur le bouton Supprimer sur 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 dans la vérification des fichiers qui sont toujours en train de télécharger ou dans la file d'attente, j'ai également créé une nouvelle fonction dans dropzone.js pour vérifier tous les fichiers dans un État D'erreur (ie mauvais type de Fichier, 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 fonctionne pas. Mais plus tard je me suis rendu compte que la fonction n'a pas été déclarée alors je regarde dans le dropzone.com page et prenez l'exemple pour appeler des événements. Donc, 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 lorsque le fichier sélectionné est plus grand que la taille maximale du fichier.
Le bon événement à utiliser est successmultiple ou completemultiple.