圖像上傳無法與event.preventDefault（）一起使用CodeIgniter

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> 

控制器文件：

<?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列表