发送带有文件的表单数据以及dropzonejs

我已经使用dropzonejs将文件上传到s3存储桶。发送带有文件的表单数据以及dropzonejs

现在我需要在提交按钮上的正常职位了。但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) { 

     } 
    }); 

});

来源

2017-10-28 Rajeev Ranjan

悬浮窗帖子您立即文件，除非你将其配置都不到。一旦他们成功发布，他们就会被视为已处理完成，并已从表单中删除。

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

要做到这一点，首先在你的悬浮窗选项禁用自动处理：

autoProcessQueue = false,

然后，当您单击按钮来手动处理您的文件。您的代码并不显示，但我猜$.ajax()代码you'e出被包裹在一个$("#btnSubmit").on('click', function() {...})，或类似的，使处理程序中，这样做：

myDropzone.processQueue();

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

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

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

我以前没有使用params试过，但如果它不能正常工作，但这 - 你可以手动添加表单值，使用悬浮窗的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); 
    }); 
});

来源

2017-10-28 13:37:40

我只有一个ajax调用按钮点击重新发送表单数据到不同的网址。和问题是表单数据不包含$ _FILES。 –

@RajeevRanjan是的，你的按钮点击目前正在进行AJAX调用。 Dropzone执行另一个AJAX POST（发生在您的AJAX调用之前）。我的答案描述了如何将它们组合成1 POST。 –

我的要求不允许结合他们，我知道dropzonejs如何工作。可能我无法描述我的要求。 –

发送带有文件的表单数据以及dropzonejs

回答

相关问题