如何在codeigniter中使用ajax上傳文件

Question

我想用ajax上傳一個文件以及其他參數。但是，這些文件沒有上傳。

表單代碼

<form id="first_form" method="post" enctype="multipart/form-data"> 
    <input type="file" id="file" name="file" accept="image/*" onchange="loadFile(event)"> 
    <input type="text" data-validation="url" class="form-control" id="first_name" name="first_name" placeholder="First Name" /> 
    <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name" /> 
    <input type="image" src="<?php echo base_url(); ?>assets/images/icon/_Save.png" class="Save-container img-circle" id="submit_first_form"> 
</form> 

腳本代碼

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#submit_first_form").click(function(event) { 
    event.preventDefault(); 
    var file = $("input#file").val(); 
    var first_name = $("input#first_name").val(); 
    var last_name = $("input#last_name").val(); 

    jQuery.ajax({ 
     type: "POST", 
     url: "<?php echo base_url(); ?>" + "student/add_data", 
     dataType: 'json', 
     data: { 
      file: file, 
      first_name: first_name, 
      last_name: last_name 
     }, 
     success: function(res) { 
     if (res) 
      { 
       console.log(res); 
      } 
     } 
    }); }); }); 
</script> 

控制器代碼

public function add_data() 
    { 
     $data = array(
      'file' => $this->input->post('file'), 
      'first_name' => $this->input->post('first_name'), 
      'last_name'=>$this->input->post('last_name') 
     ); 

     $status = ""; 
     $msg = ""; 
     $file_element_name = $data['file']; 

     $config['upload_path'] = 'www.localhost.com/project/assets/supplier'; 
     $config['allowed_types'] = 'gif|jpg|png|doc|txt'; 
     $config['max_size'] = 1024 * 8; 
     $config['encrypt_name'] = TRUE; 

     $this->load->library('upload', $config); 

     if (!$this->upload->do_upload($file_element_name)) 
      { 
       $status = 'error'; 
       $msg = $this->upload->display_errors('', ''); 
      } 
     else 
      { 
       $data = $this->upload->data(); 
       //$data['file_name'] 
       $status = "success"; 
       $msg = "File successfully uploaded"; 
      } 
     echo json_encode(array('status' => $status, 'msg' => $msg)); 
    } 

錯誤，我在控制檯我得到的是：

{狀態：「錯誤」，味精：「你沒有選擇要上傳的文件。」}

誰能告訴如何上傳文件

Answer 1

嘗試使用此代碼爲腳本：

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#submit_first_form").click(function(event) { 
    event.preventDefault(); 
    var form_data = new FormData($('#first_form')[0]); 

    jQuery.ajax({ 
     type: "POST", 
     url: "<?php echo base_url(); ?>" + "student/add_data", 
     data: form_data, 
     processData: false, 
     contentType: false, 
     success: function(res) { 
     if (res) 
      { 
       console.log(res); 
      } 
     } 
    }); }); }); 
</script> 

Answer 2

<form id="first_form" method="post" enctype="multipart/form-data"> 

的加密類型時，文件上傳。

Answer 3

- >給在形式上標籤ID 提交和之前的形式密切 腳本添加一個提交按鈕發送請求 $（「＃拯救」）點擊（函數（事件）{ event.preventDefault（）;

// Create an FormData object 
    var data1 = new FormData($('#fileUploadForm')[0]); 
     console.log($('#fileUploadForm')); 
$.ajax({ 
     type: "POST", 
     enctype: 'multipart/form-data', 
     url: "<?php echo base_url(); ?>" + "student/add_data", 
     data: data1, 
     processData: false, 
     contentType: false, 
     cache: false, 

     success: function (data) { 
     data = JSON.parse(data); 
     console.log(data); 
     if(data.id==1) 
     { 
      localStorage.setItem("user_profile_pic", data.user_pic); 

      alert("updated sucessfully") 

     } 



     } 
    });