CakePHP的形式傳上傳文件通過Ajax控制器

Question

我有的使用CakePHP形式生成器創建的形式，這種形式有幾個文件上傳的字段如下：

<?php echo $this->Form->create('application', array('type' => 'file', 'url' => array('app' => true, 'controller' => 'jobs', 'action' => 'save_new_application'), 'id' => 'create-application-form')); 

    echo '<p>'.$this->Form->input('cv', array('type' => 'file', 'label' => "Upload CV (Required)", 'required' => true)).'</p>'; 
    echo '<p>'.$this->Form->input('cover-letter', array('type' => 'file', 'label' => "Upload Cover Letter (optional)")).'</p>'; 
    echo $this->Form->input('campaignid', array('type' => 'hidden', 'class' => 'form-control sendid', 'label' => false, 'value' => $campaignid)); 
    echo $this->Form->input('profileid', array('type' => 'hidden', 'class' => 'form-control sendid', 'label' => false, 'value' => $profileid)); 
    echo $this->Form->submit('Apply', array('class' => 'form-control')); ?> 

<?php echo $this->Form->end(); ?> 

然而，我需要這種形式是通過ajax提交，以便頁面不刷新，與網站上的其他表單一樣，我有下面的jquery，但是控制器只獲取兩個隱藏字段並且沒有關於上傳文件的信息。

$('#create-application-form').off().on('submit', function(e){ 
      e.preventDefault(); 
      $.ajax({ 
       url: '/app/jobs/save_new_application/', 
       dataType: 'json', 
       method: 'post', 
       data: $(this).serialize() 
      }) 
       .done(function(response) { 
        //show result 
        if (response.status == 'OK') { 

        } else if (response.status == 'FAIL') { 

        } else { 
         //show default message 
        } 
       }) 
       .fail(function(jqXHR) { 
        if (jqXHR.status == 403) { 
         window.location = '/'; 
        } else { 
         console.log(jqXHR); 

        } 
       }); 

     }); 

我需要什麼樣的Ajax調用切換到能夠實際的文件數據傳遞給控制器​​，以便可以將文件保存在服務器上？

Answer 1

你必須發送New FormData()對象使用AJAX

更新代碼發送文件

$('#create-application-form').off().on('submit', function(e){ 
     e.preventDefault(); 
     var formdatas = new FormData($('#create-application-form')[0]); 
     $.ajax({ 
      url: '/app/jobs/save_new_application/', 
      dataType: 'json', 
      method: 'post', 
      data: formdatas, 
      contentType: false, 
      processData: false 
     }) 
      .done(function(response) { 
       //show result 
       if (response.status == 'OK') { 

       } else if (response.status == 'FAIL') { 

       } else { 
        //show default message 
       } 
      }) 
      .fail(function(jqXHR) { 
       if (jqXHR.status == 403) { 
        window.location = '/'; 
       } else { 
        console.log(jqXHR); 

       } 
      }); 

    });