带有文件上传的 CakePHP Ajax 表单提交答案

【问题标题】：CakePHP Ajax form submission with File Upload带有文件上传的 CakePHP Ajax 表单提交
【发布时间】：2012-06-13 17:20:06
【问题描述】：

我正在使用 AJAX 表单提交的蛋糕 PHP 文件上传。但它不是工作。 $_FILES 数组中没有任何内容。但是当我使用普通表单提交时，它工作正常，没有任何问题。我正在使用以下代码使用 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 数组正在返回值。任何人都可以帮忙...？

【问题讨论】：

没有通过 ajax 上传文件的正确方法。如果您不想刷新页面并仍然上传文件，则必须使用 iframe。
你绝对不需要 iframe。通过 ajax 发布就可以了。
burzum - 您不能使用 Ajax 发布文件。 stackoverflow.com/a/166267/7032

标签： cakephp cakephp-1.3 cakephp-model

【解决方案1】：

正如 void0 所述，您不能使用 Ajax 发布文件。 This similar question 有一些解决方法和建议的库。

【讨论】：

你知道任何 cakephp 插件或可以与表单一起使用的东西，以便集成变得容易
我使用 jQuery uplodify 插件 (uploadify.com) 取得了一些成功。警告 - 它确实有效，但调试 flash 的东西真的很痛苦:-(
我使用隐藏的 iframe 完成了这项工作。似乎它比其他东西更容易。所以这也将显示验证而不使用 AJAX

【解决方案2】：

看看这个 CakePHP 插件：https://github.com/srs81/CakePHP-AjaxMultiUpload

我认为这可能正是您正在寻找的。p>

【讨论】：

【解决方案3】：

现在可以了。

我就是这样实现的。首先，我使用 Uploadable Behavior 来处理从以下位置上传的文件：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>

【讨论】：