2012-06-10 89 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>