À l'aide de Dropzone.js pour télécharger après la nouvelle de la création des utilisateurs, envoyer des en-têtes

Je suis à l'aide d'un plugin - dropzone.js (dropzonejs.com) pour faire de mon site un peu plus de fantaisie lors de l'enregistrement d'un nouvel utilisateur.

Fondamentalement, l'utilisateur remplit un formulaire, des gouttes d'un couple d'images sur le "dropzone", et clique sur "Soumettre", ce qui déclenche un appel ajax qui affiche le formulaire à un script php.

J'ai dropzone les paramètres réglés pour enqueForUpload:false, ce qui permet de garder les fichiers de l'auto-mise en ligne, car j'ai besoin d'eux afin de les importer dans uploads/$userid, après le nouvel id d'utilisateur a été créé. Je peux donner dropzone en-tête params, que je suis en supposant post à l'url, semblable à un appel ajax, au lieu de données: {'userid': userid}, dropzone utilise des en-têtes: {'userid': userid}... Cependant, dropzone est initialisé sur le document.prêt, et que le nom de la variable n'est pas encore déclarée, dropzone ne parvient pas à initialiser.

Je devine que je vais avoir besoin d'initialiser dropzone avec le document.prêt, mais ne pas lui donner les en-têtes pour l'instant. Puis, après l'ajax formulaire de traitement est réussi et retourne l'identifiant, appel dropzone de télécharger et de lui donner les en-têtes à ce point. Le problème est, je ne sais pas ce code devra être appelé à le faire se produire.

Initialiser Dropzone sur prêt:

$(document).ready(function(){
  $('#dropzone').dropzone({
    url: 'dropzoneprocess.php',
    maxFilesize: 1,
    paramName: 'photos',
    addRemoveLinks: true,
    enqueueForUpload: false,
  });
});

Alors...

$('#submit').on('click', function(){
    validation crap here
    $.ajax({
        type: 'post',
        url: 'postform.php',
        data: {'various': form, 'values': here}
        datatype: 'json',
        success: function(data){
           var userid = data.userid;

    /* (and this is what I can't figure out:)
    tell dropzone to upload, and make it 
    post userid to 'dropzone.php' */

     });
});

OriginalL'auteur nickbaits | 2013-06-29

  1. 26

    Si vous utilisez la dernière Dropzone version, le paramètre enqueueForUpload a été supprimé, en faveur de autoProcessQueue qui rend l'ensemble de files d'attente plus facile.

    Donc, il suffit d'appeler myDropzone.processQueue() dès que vous le souhaitez tous les fichiers à télécharger.

    Pour ajouter des paramètres supplémentaires à la XHR vous pouvez simplement vous inscrire à la sending événement, qui obtient le xhr objet en tant que deuxième et formData comme troisième paramètre, puis ajouter les données vous-même. Quelque chose comme ceci:

    myDropzone.on("sending", function(file, xhr, formData) {
  //add headers with xhr.setRequestHeader() or
  //form data with formData.append(name, value);
});
    Je suis curieux de savoir les utiliser de .append. Je n'ai jamais vu cette méthode sur un objet et pourquoi ne pas formData.name="value" travail?
    bonjour, aucune idée de pourquoi ça ne fonctionne pas, mais vous pouvez trouver la même constatation dans l'article stackoverflow.com/questions/21942314/... dans la réponse
    voir developer.mozilla.org/en-US/docs/Web/API/FormData/append

    OriginalL'auteur enyo

  2. 4

    J'ai utilisé enyo réponse, mais j'ai utilisé de nombreux centres de données de l'attribut id dans ma page j'ai donc utilisé:

    $('div.dropzone').dropzone({
    url: 'img.php'
});
var sendingHandler = function(file, xhr, formData) {
    formData.append('id', $(this.element).data('id'));
};
$('div.dropzone').each(function() {
    Dropzone.forElement(this).on('sending', sendingHandler);
});
    Au lieu d'itération à deux reprises au cours de la .dropzone éléments, vous pouvez simplement utiliser le init: function() { } de config, et la configuration de l' sending écouteur d'événement.

    OriginalL'auteur Lukas Ignatavičius