發送帶有文件的表單數據以及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

回答

相關問題