ファイルとフォームデータを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

ドロップゾーンのPOSTファイルすぐに、あなたはそれがないように設定しない限り。それらが正常にPOSTされると、それらは処理され、完了したとみなされ、フォームから削除されます。

他のフォームデータでPOSTする場合は、自動処理を無効にして、フォームを送信するまでファイルがPOSTされないようにすることをお勧めします。これは、ファイルとフォームの値が同じURL（同じハンドラ）にPOSTされることに注意してください。ファイルとデータを含むPOSTを処理するには、ecommerce/uploadsalesheetとapp/attachmentsメソッドを1つのメソッドに結合する必要があります。

は、まず、あなたのドロップゾーンオプションで自動処理を無効にし、それを行うには：あなたがあなたのボタンをクリックしたときに

autoProcessQueue = false, 

その後、手動でファイルを処理します。あなたのコードがそれを示していないが、私はやる、そのハンドラ内ので、you'eは$("#btnSubmit").on('click', function() {...})に包まれた、または類似れるよう$.ajax()コードを推測：

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); 
    }); 
});