2012-06-10 24 views
2

我正在使用AJAX表單提交蛋糕PHP文件上傳。但它並不令人滿意。 $ _FILES數組中沒有任何內容。但是,當我使用正常表單提交時,它工作正常,沒有任何問題。我使用表格下面的代碼提交使用AJAXCakePHP Ajax表單提交與文件上傳

echo $this->Form->create('AlbumDetail',array('enctype' => 'multipart/form-data','type'=>'file')); 

    echo $form->input('Image',array("type" => "file")); 

    echo $ajax->submit('Add Album', array('url'=> array('controller'=>'album_details', 'action'=>'addalbum'), 'update' => 'album_update')); 

雖然,

echo $this->Form->create('AlbumDetail', array('enctype' => 'multipart/form-data', 'controller' => 'album_details', 'action' => 'addalbum', 'type' => 'file')); 

echo $form->input('Image',array("type" => "file")); 

echo "<input name='submit' type='submit' value='Add Album'>"; 

工作沒有任何問題和$ _FILES數組返回值。任何人都可以做一些幫助...?

+1

沒有_proper_通過ajax上傳文件的方式。如果您不想刷新頁面並仍然上傳文件,則必須使用iframe。 – void0

+0

你絕對不需要一個iframe。通過ajax發佈後工作得很好。 – burzum

+0

burzum - 您無法使用Ajax發佈文件。 http://stackoverflow.com/a/166267/7032 – RichardAtHome

回答

2

正如void0所提到的,您不能使用Ajax發佈文件。 This similar question 有一些解決方法和建議的庫。

+1

你知道任何cakephp插件或者可以與表單一起使用的東西,這樣集成起來很容易 –

+0

我使用jQuery uplodify插件取得了一些成功( http://www.uploadify.com/)。警告 - 它工作,但它是一個真正的痛苦調試閃存的東西:-( – RichardAtHome

+0

我已經做了這個使用隱藏的iframe。看起來像它比其他東西很容易,所以這將顯示驗證也沒有使用AJAX –

0

現在有可能。

這就是我如何做到的。首先,我通過上傳行爲處理文件上載:https://github.com/cakemanager/cakephp-utils

型號:

$this->addBehavior('Utils.Uploadable', [ 
     'file' => [ 
     'removeFileOnUpdate' => false, 
     'field' => 'file_tmp', 
     'path' => dirname(ROOT).'{DS}invoices{DS}', 
     'fileName' => '{field}' 
     ] 
    ]); 

控制器:

public function ajaxInvoice() { 

    if ($this->request->is('ajax')) { 
     $this->autoRender = false; 
     $this->Invoices->deleteAll(['order_id' => $this->request->data['order_id']]); 

     $invoice = $this->Invoices->newEntity(); 

     $invoice->order_id = $this->request->data['order_id']; 
     $invoice->file_tmp = $this->request->data['file']['name']; 

     $invoice = $this->Invoices->patchEntity($invoice, $this->request->getData()); 

     $this->Invoices->save($invoice); 
     $this->response->body($invoice); 

    } 
} 

模板:

<?php use Cake\Routing\Router; ?> 

<input type="file" class="upload<?= $id ?> hidden"><a data-id="<?= $id ?>" class="upload">Upload</a> 

<script type = "text/javascript" > $(document).ready(function() { 
    $('.upload').on('click', function() { 
     var id = $(this).attr('data-id'); 
     $('.upload' + id + '').click(); 
     $('.upload' + id + '').change(function(e) { 
      e.stopImmediatePropagation(); 
      var form = new FormData(); 
      form.append('file', $(this)[0].files[0]); 
      form.append('order_id', id); 
      $.ajax({ 
       type: "POST", 
       url: '<?php echo Router::url(array('controller ' => 'Invoices ', 'action ' => 'ajaxInvoice ')); ?>', 
       data: form, 
       cache: false, 
       contentType: false, 
       processData: false, 
       success: function(data, status, xhr) { 
        var response = JSON.parse(xhr.responseText); 
       }, 
      }); 
     }); 
    }); 
}); 
</script>