图像上传不与event.preventDefault()CodeIgniter一起使用

时间:2015-11-03 10:24:10

标签: php jquery ajax codeigniter

我在CodeIgniter中创建了一个用于上传图像的表单。

查看文件:

<form method="POST" action="<?php echo base_url().'promotions/add_item' ?>" enctype='multipart/form-data' class="form-horizontal" id="addItem">
    <div class="form-group">
        <label class="col-sm-3 control-label">Title</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" name="title" id="title" placeholder="Title">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">Image</label>
        <div class="col-sm-9">
            <input type="file" name="pro_image">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">Description</label>
        <div class="col-sm-9">
            <textarea class="form-control" rows="3" name="description" placeholder="Description"></textarea>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-3 col-sm-9">
            <button type="submit" class="btn btn-success" name="submit" id="submit">Submit</button>
        </div>
    </div>

</form>

Ajax代码:

 <script>
    $(function(){
        $( "#addItem" ).submit(function( event ) {
           var url = $(this).attr('action');
                $.ajax({
                url: url,
                data: $("#addItem").serialize(),
                type: $(this).attr('method')
              }).done(function(data) {
                  $('#ret').html(data);
                  // window.location.reload();
                $('#addItem')[0].reset();
              });
            event.preventDefault();
        });
    });
</script>

Controller文件:

<?php
$this->form_validation->set_rules('title','Title','required');
$this->form_validation->set_rules('description','Description','required');

var_dump($_FILES['pro_image']);
if ($this->form_validation->run() == FALSE) {
    echo '<div class="alert alert-dismissable alert-danger"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><small>'.  validation_errors().'</small></div>';
} else {

    if ($_FILES['pro_image']['size'] > 0) {
        $this->upload->initialize(array( 
        "upload_path" => './uploads/',
        "overwrite" => FALSE,
        "encrypt_name" => TRUE,
        "remove_spaces" => TRUE,
        "allowed_types" => "gif|jpg|png|jpeg",
        ));

        if (!$this->upload->do_upload('pro_image')) {
            echo 'Error :'. $this->upload->display_errors();
        }

        $data = $this->upload->data();
        $img = $data['file_name'];
    } 

    $title = $this->input->post('title');
    $description = $this->input->post('description');

    $this->promotions_model->add_item($title, $description,'uploads/'.$img);
}

每当我尝试上传图片时,它总是显示为null,但如果我注释掉event.preventDefault();行,然后上传图片,那么它就能正常工作。但是,验证和返回消息等其他功能无法正常工作。

任何人都可以告诉我event.preventDefault()的问题是什么?

2 个答案:

答案 0 :(得分:1)

<script>
$(function(){
    $( "#addItem" ).submit(function( event ) {
        event.preventDefault();
       var url = $(this).attr('action');
       var data= new FormData($("#addItem")[0]);
            $.ajax({
            url: url,
            contentType:false,
            cache:false,
            processData:false,
            data: data,
            type: 'POST' // POST/GET
            success:function(data) {
              $('#ret').html(data);
              $('#addItem')[0].reset();
             } 
          });

    });
});

答案 1 :(得分:0)

添加event.preventDefault();在开始的sumbit listner中