如何将 Dropzone 返回值附加到表单数据答案

【问题标题】：How to append Dropzone return value to Form Data如何将 Dropzone 返回值附加到表单数据
【发布时间】：2018-02-06 06:07:28
【问题描述】：

我有一个通过 laravel 验证提交表单数据的 Ajax。

$('body').on('click', '#submit', function(){
 var form_data = new FormData($('form')[1]);

 $.ajax({
     url:'/admin/products/',
     type:'POST',
     processData: false,
     contentType: false,
     dataType: 'json',
     data:form_data,
     success:function(data) {

     },
 });

然后还可以在单独的 Ajax url 中上传/删除 Dropzone 文件。

<div id="fileInput" class="dropzone">
    <input name="p_file" type="file" multiple />
</div>

Dropzone.autoDiscover = false;
new Dropzone('#fileInput', {
    // paramName: 'p_file',
    url: "/admin/products/upload",
    // autoProcessQueue: false,
    addRemoveLinks: true,

    init: function () {
        var myDropzone = this;
        myDropzone.on('success', function (file, serverResponse) {
            var fileuploded = file.previewElement.querySelector("[data-dz-name]");
            fileuploded.innerHTML = serverResponse;
        });

        myDropzone.on('removedfile', function(file, response) {
            var name = file.previewElement.querySelector('[data-dz-name]').innerHTML;
        });

        sending: function (file, xhr, formData) {
            // formData.append("name", $('#name').val());
        }
})

根据文档，我必须使用它来进行正常的表单提交。

sending: function (file, xhr, formData) {
        // formData.append("name", $('#name').val());
    }

但我想将 Dropzone 值附加到第一个 Ajax 的 form_data 中，而不是像文档中那样将其他 form_data 附加到 Dropzone。我该怎么办？

【问题讨论】：

标签： jquery ajax dropzone.js

【解决方案1】：

将 dropzone 文件分配到一个变量中，然后将其添加到 FormData 对象

$('body').on('click', '#submit', function(){
var fileUpload = $('#fileInput').get(0).dropzone;
var files = fileUpload.files;
var form_data= new FormData();

// Looping over all files and add it to FormData object  
    for (var i = 0; i < files.length; i++) {
        form_data.append(files[i].name, files[i]);
    }

 $.ajax({
     url:'/admin/products/',
     type:'POST',
     processData: false,
     contentType: false,
     dataType: 'json',
     data:form_data,
     success:function(data) {

     },
 });

【讨论】：