codeigniter jquery ajax文件上傳

Question

我正在創建一個簡單的jquery ajax crud應用程序。下面是我的代碼：

welcome.php

public function add_contestant() { 
    $this->validate(); 

    $path = 'img/'; 
    $config['upload_path'] = '/img/'; 
    $config['allowed_types'] = 'gif|jpg|png'; 
    $this->load->library('upload', $config); 
    $this->upload->do_upload("file"); 

    $data = array(
       "Firstname" => $this->input->post('first_name'), 
       "Lastname" => $this->input->post('last_name'), 
       "DateOfBirth" => $this->input->post('dob'), 
       "IsActive" => (int)$this->input->post('is_active'), 
       "DistrictId" => $this->input->post('district'), 
       "Gender" => $this->input->post('gender'), 
       "PhotoUrl" => $path, 
       "Address" => $this->input->post('address') 
      ); 

    $this->contest->insert($data); 

    echo json_encode(array("status" => TRUE)); 
} 

contestant_view.php

$('#save').click(function(event) {$('.help-block').empty(); 
    event.preventDefault(); 

    var first_name = $('#first_name').val(); 
    var last_name = $('#last_name').val(); 
    var dob = $('#dob').val(); 
    var is_active = $("#is_active").is(":checked") ? 1 : 0; 
    var district = $('#district').val(); 
    var gender = $("input[type='radio'][name='gender']:checked").val(); 
    var photo = $('input[type=file]').val(); 
    var address = $('#address').val();//alert(gender); 

    $.ajax({ 
     type: 'POST', 
     url: '<?php echo base_url('index.php/welcome/add_contestant/'); ?>', 
     dataType: 'json', 
     data: {first_name: first_name, last_name: last_name, dob: dob, is_active: is_active, district: district, gender: gender, photo: photo, address: address}, 
     success: function(data) { 

      if(data.status) { //if success close modal and reload ajax table 
       list_table(); 
      } else { 
       for (var i = 0; i < data.inputerror.length; i++) { 
        $('[name="'+data.inputerror[i]+'"]').parent().parent().addClass('has-error'); //select parent twice to select div form-group class and add has-error class 
        $('[name="'+data.inputerror[i]+'"]').next().text(data.error_string[i]); //select span help-block class set text error string 
       } 
      } 
     }, 
     error: function (jqXHR, textStatus, errorThrown) { 
      alert('Error getting data from ajax'); 
     } 
    }); 
}); 

<input type="file" name="file" id="photo"> 

我的問題是，該文件沒有在目錄上傳。我不明白髮生了什麼事。任何幫助，將不勝感激。謝謝 ！

Answer 1

而不是從一個窗體中尋找個別組件，我會建議使用這種方式。假設你爲form元素提供了一個'id'作爲「customize_form」。然後，您可以從HTML中查找整個表單並將其上傳到服務器。這樣，您就可以訪問POST元素作爲一個正常的表單提交

 var form = $('#customize_form')[0]; 
     var formData = new FormData(form); 

     jQuery.ajax({ 
      type: "POST", 
      url: '<?php echo base_url('index.php/welcome/add_contestant/'); ?>', 
      data: formData, 
processData: false, //These 2 lines are extremely important. 
contentType: false, //Will not work without these 
      success: function(data){ 
       if(data.status) { //if success close modal and reload ajax table 
       list_table(); 
        } else { 
        for (var i = 0; i < data.inputerror.length; i++) { 
       $('[name="'+data.inputerror[i]+'"]').parent().parent().addClass('has-error'); //select parent twice to select div form-group class and add has-error class 
       $('[name="'+data.inputerror[i]+'"]').next().text(data.error_string[i]); //select span help-block class set text error string 
        } 
        } 
      }, 
      error: function (jqXHR, textStatus, errorThrown) { 
       alert('Error getting data from ajax'); 
      } 
     });