Javascript JQuery:发送多个文件和参数时出错：Dropzone已附加

我正在尝试使用dropzone将输入字段中的多个文件一起发送。不幸的是，我得到一个错误，说dropzone已经连接

这是我的密码

 $(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
    });

  });

---

Chris Baker是对的，在这里您将在同一个元素上附加多个Dropzone，谁将失败

尝试初始化dropzone一次并使用事件“发送”

// 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));
        ...
    });

});

或者直接初始化

// 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));
            ...
        }

    });

});

---

Chris Baker是对的，在这里您将在同一个元素上附加多个Dropzone，谁将失败

尝试初始化dropzone一次并使用事件“发送”

// 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));
        ...
    });

});

或者直接初始化

// 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));
            ...
        }

    });

});

---

您正在将Dropzone添加到click事件中的表单元素，这意味着每次单击该项时，此代码都会运行。这会在您第一次单击它之后，每次都会显示错误消息，因为正如它所说的，Dropzone已经添加到目标元素中。您必须a）在

domready

上而不是单击时将dropzone添加到表单中，或者b）如果要在代码的其他位置动态添加新字段，请仅将其添加到字段本身，而不是表单中。如果我使用a。我的输入字段值将不会发送。只有dropzone中的文件，如何实现文件和输入字段值相同。您可以使用

包含

元素和

多个属性集。用户可以在
元素中删除多个文件的选择，然后用户可以提交表单，表单应包括
元素中的文件和其他输入字段。您正在单击事件中将Dropzone添加到表单元素中，这意味着每次单击项目时，此代码都会运行。这会在您第一次单击它之后，每次都会显示错误消息，因为正如它所说的，Dropzone已经添加到目标元素中。您必须a）在
domready
上而不是单击时将dropzone添加到表单中，或者b）如果要在代码的其他位置动态添加新字段，请仅将其添加到字段本身，而不是表单中。如果我使用a。我的输入字段值将不会发送。只有dropzone中的文件，如何实现文件和输入字段值相同。您可以使用
包含
元素和
多个属性集。用户可以在
元素中删除多个文件的选择，然后用户可以提交表单，表单应包括
元素中的文件和其他输入字段。