dropzone js onclick soumettre téléchargement de fichier
télécharger tous les fichiers en un seul clic.
HTML:
<button id="submit-all">Submit all files</button>
<form action="/target" class="dropzone" id="my-dropzone"></form>
JS:
Dropzone.options.myDropzone = {
// Prevents Dropzone from uploading dropped files immediately
autoProcessQueue: false,
init: function() {
var submitButton = document.querySelector("#submit-all")
myDropzone = this; // closure
submitButton.addEventListener("click", function() {
myDropzone.processQueue(); // Tell Dropzone to process all queued files.
});
// You might want to show the submit button only when
// files are dropped here:
this.on("addedfile", function() {
// Show submit button here and/or inform user to click it.
});
}
};
mais le fichier est téléchargé après glisser-déposer..
5 réponses
utiliser le code simple
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone(element, {
url: "/upload.php",
autoProcessQueue: false,
});
$('#imgsubbutt').click(function(){
myDropzone.processQueue();
});
j'ai accompli ceci en plaçant ma dropzone dans un div au lieu d'un formulaire, supprimant ainsi la possibilité pour dropzone De automatiquement POST télécharge vers une URL donnée. L'URL que j'ai passé à l'instance dropzone lorsque je l'ai créée est littéralement 'dummy' puisqu'elle ne sera jamais appelée. Exemple,
HTML
<button id="submit-all">Submit all files</button>
<div class="dropzone" id="my-dropzone"></div>
JavaScript
$('#submit-all').on('click', function() {
var files = $('#my-dropzone').get(0).dropzone.getAcceptedFiles();
// Do something with the files.
});
j'ai juste fini de déconner avec moi-même - j'ai voulu ajouter des informations sur l'image à une base de données en même temps que de l'importer. Laisser tomber un fichier ouvre le formulaire d'entrée pour les informations supplémentaires et puis la file d'attente doit envoyer après que le bouton de formulaire est pressé.
j'ai finalement atteint cet objectif en mettant un gestionnaire d'événements jQuery click à l'intérieur de la fonction init 'on add file' event:
this.on("addedfile", function(file){
var myDropzone = this;
$('#imageinfoCont').animate({left:'4.5%'});//brings form in
$('#imgsubbutt').click(function(){
$('#imageinfoCont').animate({left:'-10000px'}); //hides the form again
myDropzone.processQueue(); //processes the queue
});
});
j'ajoute alors les données supplémentaires dans un 'sur l'envoi'séparé fonction event (pourrait probablement le faire dans le code ci-dessus, mais baby steps je pense).
Semble fonctionner comme un charme.
Voici comment j'implémente le téléchargement retardé (initié en cliquant sur n'importe quel bouton, pour un exemple):
Dropzone mise en œuvre
var count = 0;
var addedFilesHash = {};
var myDropzone = new Dropzone("#file_upload-form", {
paramName: "file", // The name that will be used to transfer the file
addRemoveLinks: true,
maxFilesize: 5, // MB
parallelUploads: 5,
uploadMultiple: true,
acceptedFiles: "image/*,.xlsx,.xls,.pdf,.doc,.docx",
maxFiles: 10,
init: function() {
this.on("removedfile", function (file) {
// delete from our dict removed file
delete addedFilesHash[file];
});
},
accept: function(file, done) {
var _id = count++;
file._id = _id;
addedFilesHash[_id] = done;
}
});
ailleurs
// get all uploaded files in array
var addedFiles = Object.keys(addedFilesHash);
// iterate them
for (var i = 0; i< addedFiles.length; i++) {
// get file obj
var addedFile = addedFiles[i];
// get done function
var doneFile = addedFilesHash[addedFile];
// call done function to upload file to server
doneFile();
}
nous outrepassons accept et removedFile fonctions. accept fonction que nous collectons file objets et done fonctions dans le dict où la clé est file et la valeur est done fonction. Plus tard, lorsque nous serons prêts à télécharger des fichiers ajoutés, nous itérerons tous les fichiers done fonctions pour tous les fichiers de dict addedFilesHash qui lance upload progress avec barre de progression et etc.
bien que ceci ait été répondu, je me suis trouvé dans une situation où je voulais soumettre la file D'attente seulement si c'était un certain type de fichier. Le bug que j'ai rencontré c'était ignorant processQueue.
this.dropzone = new Dropzone('#my-dropzone', {
autoProcessQueue: false,
});
return this.dropzone.on('addedfile', (function(_this) {
return function(file) {
var IMAGE_EXTENSIONS, ext;
IMAGE_EXTENSIONS = 'png jpg jpeg gif'.split(' ');
ext = (_.last(file.name.split('.'))).toLowerCase();
if (_.include(IMAGE_EXTENSIONS, ext)) {
return console.log('IMAGE!');
} else {
return setTimeout(function() { // HERE!!!!!!!!!!!!!!!!!!!!
return _this.dropzone.processQueue();
}, 10);
}
};
})(this));
j'ai eu à utiliser le setTimeout vu ci-dessus, car processQueue n'a rien fait si Je ne l'ai pas reporté de cette façon.