Cakephp表单通过ajax将上传文件传递给控制器

时间:2015-07-21 15:00:03

标签: php jquery ajax cakephp

我有一个使用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调用中更改什么才能将实际文件数据传递给控制器​​,以便将文件保存在服务器上?

1 个答案:

答案 0 :(得分:2)

您必须使用ajax

发送New FormData()个对象以发送文件

更新了代码

   $('#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);

                }
            });

    });