JQuery：如何使用 dropzone.js 将多个文件放入 formData 并通过 ajax 发送答案

【问题标题】：JQuery : How to put multiple files into formData using dropzone.js and send it via ajaxJQuery：如何使用 dropzone.js 将多个文件放入 formData 并通过 ajax 发送
【发布时间】：2016-09-28 16:24:52
【问题描述】：

我在尝试上传多个文件时遇到问题。我有两种通过 ajax 发送到页面的方法。一个是dropzone，另一个是我的XMLHttpRequest。每次我通过单击按钮发送时，它都会复制我的请求，仅遵循第一种方法，即 dropzone 并忽略我的XMLHttpRequest。因此，我正在尝试找出将其绑定发送到 formData 以使其仅对文件的 1 个请求的方法。

我的表格

        <form style="border:3px dashed #D9EDF7;" action="UploadImage"
              class="dropzone dz-clickable"
              id="my-awesome-dropzone" enctype="multipart/form-data">
              <div class="dz-message">Drop files here or click to upload.
                        <br> <span class="note">(Selected files are not 
              automatically uploaded.)</span>
                    </div>
            <div class="fallback">
                <input name="file" id="filez" type="file" multiple/>
             </div>

        </form>

我的 Js

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone('#my-awesome-dropzone', {
   url : '../ajax/ajax_add/ajax_addNEWContestant.php?
   multipleImage=multiple_image&event_id='+event_id,
   autoProcessQueue : false
});

$(document).on('click','#addnewContestant', function(e){
    myDropzone.processQueue();

    var formdata = new FormData();
    formdata.append('file_addnew', file_addnew.files[0]);
    //If there is a way, I just want to bind all the files from dropzone into formData
    var data = new FormData();
    for(var b=0; b<imageContainer.length; b++){
        formdata.append('All_files_from_dropzone[], input_file.files[b]);
    }



   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);


   beforeSend();            
   xhr = new XMLHttpRequest();
   var url = '../ajax/ajax_add/ajax_addNEWContestant.php';
   xhr.open('post', url+param, true);

});

【问题讨论】：

标签： javascript jquery ajax dropzone.js

【解决方案1】：

Dropzone 已经将其他表单字段连同文件一起提交，因此您无需自己做任何 xhr 工作

【讨论】：