与 dropzonejs 一起发送带有文件的表单数据

Question

我已使用 dropzonejs 将文件上传到 s3 存储桶。

现在我也需要提交按钮上的正常帖子。 但 form_post 不包含 $_FILES。

拖放区代码：----

 Dropzone.autoDiscover = false;
 var myDropzone = new Dropzone(".dropzone", { 
    url: '<?php echo base_url('app/attachments')?>',
    maxFiles:1,
    method:'post',
    paramName:'attachment',
    uploadMultiple:false,
    addRemoveLinks:true,
    params:{pg_tn:$('#pg_tn').val()},        
    acceptedFiles:".csv,.xls,.xlsx",
    //acceptedFiles:"image/jpeg,image/png,image/gif,application/msword,application/vnd.oasis.opendocument.text",
    autoProcessQueue:true,
    maxFilesize:25,
    timeout:120000
  });
  myDropzone.on("success", function(file,response) {
   var res=JSON.parse(response);   
   console.log(res);
   $('#attachment_id').val(res.attachment_id);
  });
  myDropzone.on("removedfile",function(file){
      $('#attachment_id').val('');
  });

form_post 代码：--

var form = $('#ecommerce_frm')[0];
var data = new FormData(form);
$("#btnSubmit").prop("disabled", true);
    $.ajax({
        type: "POST",
        enctype: 'multipart/form-data',
        url: "<?php echo base_url('ecommerce/uploadsalesheet');?>",
        data: data,
        processData: false,
        contentType: false,
        cache: false,
        timeout: 600000,
        success: function (data) {

        },
        error: function (e) {

        }
    });

});

Answer 1

Dropzone 会立即发布您的文件，除非您将其配置为不这样做。一旦成功发布，它们就会被视为已处理并完成，因此会从表单中删除。

如果您想将它们与其他表单数据一起发布，最好的选择可能是禁用自动处理，以便在您提交表单之前不会发布文件。请注意，这意味着文件和表单值被发布到相同的 URL、相同的处理程序。您必须将 ecommerce/uploadsalesheet 和 app/attachments 方法组合成一个方法，以处理包含文件和数据的 POST。

为此，首先在 Dropzone 选项中禁用自动处理：

autoProcessQueue = false,

然后，在您单击按钮时手动处理您的文件。您的代码没有显示它，但我猜您显示的 $.ajax() 代码包含在 $("#btnSubmit").on('click', function() {...}) 或类似名称中，因此在该处理程序中，请执行以下操作：

myDropzone.processQueue();

您现在也应该删除所有 $.ajax() 代码，因为 Dropzone 现在正在执行 POST 而您不需要这样做。您必须将任何特定的成功或失败处理移至Dropzone's appropriate event handlers。

下一个问题是您的其他表单字段都没有与文件一起发送，因为 Dropzone 不知道它们。我认为params 选项可以做到这一点，例如：

params: $('#ecommerce_frm').serialize(),

我之前没有尝试过使用params，但如果它不起作用，那么可以 - 您可以使用 Dropzone 的 sending 回调手动附加表单值：

myDropzone.on('sending', function(file, xhr, formData) {
    // Append all form inputs to the formData Dropzone will POST
    var data = $('#ecommerce_frm').serializeArray();
    $.each(data, function(key, el) {
        formData.append(el.name, el.value);
    });
});