Question

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

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

dropzone代码：----

 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立即POST你的文件，除非你不配置它。成功发布后，它们将被视为已处理并完成，因此将从表单中删除。

如果您想使用其他表单数据发布它们，最好的选择可能是禁用自动处理，以便在您提交表单之前不会发布文件。请注意，这意味着文件和表单值将POST到相同的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);
    });
});

使用文件和dropzonejs发送表单数据

1 个答案: