web-dev-qa-db-fra.com

dropzone js onclick envoyer un 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 un glisser-déposer.

javascriptdropzone.js
25
Steve Bals

utiliser un code simple

Dropzone.autoDiscover = false;

var myDropzone = new Dropzone(element, {
  url: "/upload.php",                        
  autoProcessQueue: false,
});

$('#imgsubbutt').click(function(){           
  myDropzone.processQueue();
});
45
Behnam Mohammadi

Pour ce faire, j'ai placé mon dropzone dans un div au lieu d'un formulaire, empêchant ainsi dropzone de POST automatiquement les téléchargements vers une URL donnée. L'URL que j'ai transmise à l'instance de dropzone lorsque je l'ai créée est littéralement "factice" car elle ne sera jamais appelée. Par 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.
});
17
eeuser

Voici comment j'implémente le téléchargement différé (initié en cliquant sur n’importe quel bouton, par exemple):

Implémentation de Dropzone

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 remplaçons les fonctions accept et removedFile. Dans la fonction accept, nous collectons les objets file et les fonctions done dans dict où key est file et la valeur est done fonction. Plus tard, lorsque nous serons prêts à télécharger les fichiers ajoutés, nous réitérons toutes les fonctions done de tous les fichiers de dict addedFilesHash, qui lance la progression du téléchargement avec la barre de progression, etc. 

3
dikkini

Je viens de finir de jouer avec cela moi-même - je voulais ajouter des informations sur l'image à une base de données en même temps que le télécharger. La suppression d'un fichier ouvre le formulaire de saisie pour les informations supplémentaires. La file d'attente doit ensuite être envoyée après avoir appuyé sur le bouton du formulaire. 

J'ai finalement réalisé cela en plaçant un gestionnaire d'événements jquery click dans l'événement de fonction init 'on add file':

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 ensuite les données supplémentaires dans un événement de fonction distinct "lors de l'envoi" (vous pouvez probablement le faire dans le code ci-dessus, mais je pense que c'est le cas par étapes).

Semble fonctionner comme un charme.

2
Russell Hepworth

Bien que cela ait été répondu, je me suis retrouvé dans une situation où je voulais uniquement soumettre la file d'attente SI c'était un certain type de fichier. Le bug que j'ai rencontré était qu'il ignorait 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));

Je devais utiliser le setTimeout vu ci-dessus car processQueue ne faisait rien si je ne le différais pas de cette manière.

1
Funkodebat