Question

我在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()的问题是什么？

Answer 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();
             } 
          });

    });
});

Answer 2

添加event.preventDefault（）;在开始的sumbit listner中

图像上传不与event.preventDefault（）CodeIgniter一起使用

2 个答案: