JQuery: Senden mehrerer Dateien und Parameter erhalten Fehler: Dropzone bereits angefügt

Question

Ich versuche, mehrere Dateien zusammen Wert von Eingabefeldern mit Dropzone zu senden. Leider habe ich eine Fehlermeldung erhalten, dass dropzone bereits angehängt ist.

Hier ist mein Code

$(document).on('click','#addContestant',function(e){ 
e.preventDefault(); 
var random_gender = $('#randomGender').val(); 
    var contestant_name = $('#contestant_name').val(); 
    var contestant_lastName = $('#contestant_lastName').val(); 
    var conAge = $('#conAge').val(); 
    var hAddress = $('#hAddress').val(); 
    var email_add = $('#email_add').val(); 
    var conContactNum = $('#conContactNum').val(); 
    var conDesc = $('#conDesc').val(); 
    var hidden_gender = $('#hidden_gender').val(); 
    var conId_hidden = $('#conId_hidden').val(); // the contestant prima id 

    var param = "?event_id="+encodeURIComponent(event_id)+ 
       "&contestant_name="+encodeURIComponent(contestant_name)+ 
       "&contestant_lastName="+encodeURIComponent(contestant_lastName)+ 
       "&conAge="+encodeURIComponent(conAge)+ 
       "&hAddress="+encodeURIComponent(hAddress)+ 
       "&email_add="+encodeURIComponent(email_add)+ 
       "&conContactNum="+encodeURIComponent(conContactNum)+ 
       "&conDesc="+encodeURIComponent(conDesc)+ 
       "&conId_hidden="+encodeURIComponent(conId_hidden)+ 
       "&hidden_gender="+encodeURIComponent(hidden_gender)+ 
       "&random_gender="+encodeURIComponent(random_gender)+ 
       "&multipleImage="+encodeURIComponent(multipleImage); 

    Dropzone.autoDiscover = false; 
    var myDropzone = new Dropzone('form#my-awesome-dropzone', { 
     url : '../ajax/ajax_add/ajax_addNEWContestant.php?'+param, 
     maxFilesize: 3.0, 
     maxFiles: 4, 
     parallelUploads: 10000, 
     uploadMultiple: true, 
     autoProcessQueue: false 
    }); 

    }); 

Answer 1

Chris Baker ist richtig, hier gehen Sie mehrere Dropzone auf demselben Element zu befestigen, wer dann ausfällt.

Versuchen Sie, die Dropzone einmal zu initialisieren und verwenden Sie das Ereignis 'sending'.

// Dropzone config 
Dropzone.autoDiscover = false; 

// To run when dom is ready 
$(document).ready(function(){ 

    // Manual Dropzone init 
    var myDropzone = new Dropzone('form#my-awesome-dropzone', { 
     url : '../ajax/ajax_add/ajax_addNEWContestant.php', 
     maxFilesize: 3.0, 
     ... 
    }); 

    // Add dynamic event on sending 
    myDropzone.on('sending', function(file, xhr, formData){ 
     // Fetch values to send 
     var contestant_name = $('#contestant_name').val(); 
     ... 

     // Add it to request data send by Dropzone 
     formData.append('event_id', encodeURIComponent(event_id)); 
     formData.append('contestant_name', encodeURIComponent(contestant_name)); 
     ... 
    }); 

}); 

oder direkt in der Initialisierung

// Dropzone config 
Dropzone.autoDiscover = false; 

// To run when dom is ready 
$(document).ready(function(){ 

    // Manual Dropzone init 
    var myDropzone = new Dropzone('form#my-awesome-dropzone', { 
     url : '../ajax/ajax_add/ajax_addNEWContestant.php', 
     maxFilesize: 3.0, 
     ... 
     sending: function(file, xhr, formData){ 
      // Fetch values to send 
      var contestant_name = $('#contestant_name').val(); 
      ... 

      // Add it to request data send by Dropzone 
      formData.append('event_id', encodeURIComponent(event_id)); 
      formData.append('contestant_name', encodeURIComponent(contestant_name)); 
      ... 
     } 

    }); 

});