Impossible d'envoyer plusieurs champs de formulaire formdata dropzone.js

Question

Je rencontre un problème lors de l'envoi des images avec un champ de zone de texte pour que le client envoie une description de la photo, et quand il l'envoie à la base de données envoie comme si tout le même description qui a été insérée une seule description,

J'utilise la bibliothèque DROPZONE.JS http://dropzonejs.com/

Suivez mon code .. Aidez-moi s'il vous plaît.

Dropzone.options.upload = { 
    thumbnailWidth: 246, 
    thumbnailHeight: 173, 
    enqueueForUpload:false, 
    paramName: "userfile", 
    sending: function(file, xhr, formData) {  
     formData.append("titulo", $("#titulo").val()); 
     formData.append("evento", <?php echo $this->uri->segment(4); ?>); 
     formData.append("capa", $("#cap").val()); 
    } 
}; 

function upload() { 
    var dz = Dropzone.forElement("#upload"); 
    for (var i = 0; i < dz.files.length; i++) { 
     dz.filesQueue.push(dz.files[i]); 
    } 
    dz.processQueue(); 
} 

Answer 1

Lorsque vous utilisez $("#titulo") vous référer à l'entrée/textarea ayant l'id de titulo.

Par exemple <input type="text" id="titulo">.

Il ne peut y avoir qu'un seul élément DOM ayant un identifiant dans le document entier.

Changez votre élément en <input type="text" class="titulo"> puis utilisez quelque chose comme $(".titulo")[0], $(".titulo")[1] pour sélectionner les champs.

Answer 2

Comme indiqué, il ne peut y avoir qu'un seul élément DOM ayant un identifiant dans le document entier ou vous aurez des problèmes. Cela peut être résolu à la volée en ajoutant le nom du fichier à l'identifiant de votre champ de zone de texte.

code Ajouter votre zone de texte dans le previewTemplate

previewTemplate: "<div class=\"dz-preview dz-file-preview\"> ... 
<input type=\"text\" class=\"titulo\" data-dz-titulo > 
... 
data-dz-errormessage></span></div>\n</div>" 

Lorsque le previewTemplate est rendu par la fonction addedfile créer un identifiant appelé titulo + file.name pour donner à votre élément un identifiant unique. Cela peut être fait en ajoutant une ligne de code dans la fonction addedfile.

addedfile: function(file) { 
    file.previewElement = Dropzone.createElement(this.options.previewTemplate); 
    ... 
    file.previewElement.querySelector("[data-dz-titulo]").id = "titulo" + file.name; 
    ... 
    file.previewElement.querySelector("[data-dz-size]").innerHTML = this.filesize(file.size); 
}, 

Maintenant, vous devrez également utiliser le nom de fichier pour obtenir le titulo correspondant dans la fonction d'envoi.

sending: function(file, xhr, formData) { 
    var filetitulo = document.getElementById('titulo' +file.name).value; 
    formData.append("titulo", filetitulo); 
    });