使用Ajax，jQuery和Codeigniter上传图像

问题描述：

我想添加一个功能，我可以在使用Codeigniter，Ajax，jQuery的窗体中附加图像。表单提交时，当我检查图像文件的数据库时，它似乎没有任何内容。通常他们使用FormData，但是，我已经开始使用这种方法。我想知道是否有任何事情可以这样做。使用Ajax，jQuery和Codeigniter上传图像

这是我的代码。

jQuery的

$('#addForm').submit(function(event){ 
     var emp_id = $("#agentNames").val(); 
     var campaign = $("#addCampaign").val(); 
     var k_type = $("#addKudosType").val(); 
     var c_name = $("#addCustomerName").val(); 
     var p_number = $("#addPhoneNumber").val(); 
     var e_add = $("#addEmailAdd").val(); 
     var comment = $("#addCustomerComment").val(); 
     var supervisor = $("#addSupervisor").val(); 
     var file = $("#addFile").val(); 
     var p_reward = $("#addPrefReward").val(); 
     var pfrd = $("#addProofreading").val(); 
     var k_card = $("#addKudosCard").val(); 
     var r_status = $("#addRewardStatus").val(); 

     dataString = "emp_id="+emp_id+"&campaign="+campaign+"&k_type="+k_type+"&c_name="+c_name+"&p_number="+p_number+"&e_add="+e_add+"&comment="+comment+"&supervisor="+supervisor+"&file="+file+"&p_reward="+p_reward+"&pfrd="+pfrd+"&k_card="+k_card+"&r_status="+r_status; 

     $.ajax({ 
      type: "POST", 
      url: "<?php echo base_url(); ?>index.php/Kudos/addKudos/", 
      data: dataString, 
      cache: false, 
      success: function(html) 
      { 
       alert("Succesfully Added!"); 
       location.reload(); 
      } 
     }); 
     event.preventDefault(); 
    });

控制器

public function addKudos() 
{ 
    $emp_id= $this->input->post('emp_id'); 
    $campaign= $this->input->post('campaign'); 
    $k_type= $this->input->post('k_type'); 
    $c_name= $this->input->post('c_name'); 
    $p_number= $this->input->post('p_number'); 
    $e_add= $this->input->post('e_add'); 
    $comment= $this->input->post('comment'); 
    $supervisor= $this->input->post('supervisor'); 
    $file= $this->input->post('file'); 

    $config['upload_path'] = "uploads/images/"; 
    $config['allowed_types'] = "jpg|png"; 
    $config['file_name'] = $_FILES['addFile']['name']; 

    $this->load->library('upload', $config); 
    $this->load->initialize($config); 
    if($this->upload->do_upload('addFile')){ 
     $uploadData = $this->upload->data(); 
     $picture = $uploadData['file_name']; 
    } else { 
     $picture = ''; 
    } 

    $p_reward= $this->input->post('p_reward'); 
    $pfrd= $this->input->post('pfrd'); 
    $k_card= $this->input->post('k_card'); 
    $r_status= $this->input->post('r_status'); 
    $this->KudosModel->add_kudos($emp_id,$campaign,$k_type,$c_name,$p_number,$e_add,$comment,$supervisor,$picture,$p_reward,$pfrd,$k_card,$r_status); 
}

模型

function add_kudos($emp_id,$campaign,$k_type,$c_name,$p_number,$e_add,$comment,$supervisor,$picture,$p_reward,$pfrd,$k_card,$r_status) 
{ 
    $emp_id1 =mysqli_real_escape_string($this->db->conn_id,trim($emp_id)); 
    $campaign1 =mysqli_real_escape_string($this->db->conn_id,trim($campaign)); 
    $k_type1 =mysqli_real_escape_string($this->db->conn_id,trim($k_type)); 
    $c_name1 =mysqli_real_escape_string($this->db->conn_id,trim($c_name)); 
    $p_number1 =mysqli_real_escape_string($this->db->conn_id,trim($p_number)); 
    $e_add1 =mysqli_real_escape_string($this->db->conn_id,trim($e_add)); 
    $comment1 =mysqli_real_escape_string($this->db->conn_id,trim($comment)); 
    $supervisor1 =mysqli_real_escape_string($this->db->conn_id,trim($supervisor)); 
    $file1 =mysqli_real_escape_string($this->db->conn_id,trim($picture)); 
    $p_reward1 =mysqli_real_escape_string($this->db->conn_id,trim($p_reward)); 
    $pfrd1 =mysqli_real_escape_string($this->db->conn_id,trim($pfrd)); 
    $k_card1 =mysqli_real_escape_string($this->db->conn_id,trim($k_card)); 
    $r_status1 =mysqli_real_escape_string($this->db->conn_id,trim($r_status)); 

    $query = $this->db->query("insert into tbl_kudos(emp_id,acc_id,kudos_type,client_name,phone_number,client_email,comment,uid,file,reward_type,proofreading,kudos_card,reward_status,is_given) values('$emp_id1','$campaign1','$k_type1','$c_name1','$p_number1','$e_add1','$comment1','$supervisor1','$file1','$p_reward1','$pfrd1','$k_card1','$r_status1',now())");

}

感谢。

[similar]（http://*.com/a/41786755/3898339）问题希望你有一些想法 –

要排除故障转到您的浏览器开发人员控制台中的网络选项卡，并执行var_dump（ $ _POST）在您的控制器中。你的dataString看起来似乎是为GET编写的，但不知道这将如何发挥。 – qwertzman

答

数据库没有任何文件，因为您没有提交任何文件。你没有表现出任何HTML，但你必须有这样的：

<input type="file" id="addfile">

但在jQuery的，您检索使用文件：

var file = $("#addFile").val();

将返回文件名或一个空字符串，因为您将不会使用val()获取文件内容（或图像）。您需要寻找另一种方法来使用AJAX上传带有文件内容的表单数据。看看这个：How can I upload files asynchronously?

使用Ajax，jQuery和Codeigniter上传图像

相关推荐