如何在ajax中提交包含文件的表单?

时间:2014-07-22 10:30:06

标签: php jquery ajax twitter-bootstrap yii

我正在使用Bootstrap验证器提交表单,当我提交表单时,我可以在php中发布属性,但文件属性除外(我从下面的代码中删除了它),但模态不隐藏。 / p>

这是我的HTML代码:

<button class="btn btn-default" id="loginButton">Apply for job</button>

<form id="loginForm" method="post" class="form-horizontal" style="display: none;" action="<?php echo Yii::app()->createUrl('jobs/view', array('id'=>$model->idJob)); ?>" enctype="multipart/form-data">
    <div class="form-group">
        <label class="col-md-3 control-label">Full Name</label>
        <div class="col-md-5">
            <input type="text" class="form-control" name="fullName" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-md-3 control-label">Email</label>
        <div class="col-md-5">
            <input type="email" class="form-control" name="email" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-md-3 control-label">Phone Number</label>
        <div class="col-md-5">
            <input type="text" class="form-control" name="phoneNumber" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-5 col-md-offset-3">
            <button type="submit" class="btn btn-default" id='submit' >submit</button>
        </div>
    </div>
</form>

以下是javascript代码:

$(document).ready(function() {

    $('#loginForm')
        .bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                fullName: {
                    validators: {
                        notEmpty: {
                            message: 'Name is required'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: 'valid email is required'
                        }
                    }
                },
                phoneNumber: {
                    validators: {
                        numeric: {
                            message: 'phone number should be only numbers'
                        },
                        notEmpty: {
                            message: 'valid phone Number is required'
                        }
                    }
                }
            }
        })
        .on('success.form.bv', function(e) {
            // Prevent form submission
            e.preventDefault();

            var $form = $(e.target),                        // The form instance
                bv    = $form.data('bootstrapValidator');   // BootstrapValidator instance

            // Use Ajax to submit form data
            $.post($form.attr('action'), $form.serialize(), function(result) {
                // ... Process the result ...
                alert(result);
                // Hide the modal containing the form
                $form.parents('.bootbox').modal('hide');
            }, 'json');
        });

    // Login button click handler
    $('#loginButton').on('click', function() {
        // Same code as above
       bootbox
            .dialog({
                title: 'Apply to job',
                message: $('#loginForm'),
                show: false // We will show it manually later
            })
            .on('shown.bs.modal', function() {
                $('#loginForm')
                    .show()                                 // Show the login form
                    .bootstrapValidator('resetForm', true); // Reset form
            })
            .on('hide.bs.modal', function(e) {
                // Bootbox will remove the modal (including the body which contains the login form)
                // after hiding the modal
                // Therefor, we need to backup the form
                $('#loginForm').hide().appendTo('body');
            })
            .modal('show');

    });
    });

此代码有什么问题?为什么表格没有提交?

0 个答案:

没有答案