使用 Ajax、jQuery 和 Codeigniter 上传图片

Question

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

这是我的代码。

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())");

}

谢谢。

Answer 1

数据库没有任何文件，因为您没有提交任何文件。您没有显示任何 HTML，但您必须有类似的内容：

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

但在 jquery 中，您正在使用以下方式检索文件：

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

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