使用 Ajax 和 jQuery 在 CodeIgniter PHP 中上傳文件

Question

我正在嘗試將來自文件類型輸入的值以及來自文本輸入的數據發送/上傳到 CodeIgniter 中的 do_upload() 函數。

我一直在這里和其他網站上研究如何做到這一點並將代碼應用到我的，但沒有運氣，它仍然無法工作。 我不想使用 FormData 因為我不想在我的“表單”上添加<form>元素。

這是我的 jQuery 和 Ajax：

$("#create_post").click(function(e){
    var post_title = document.getElementById("post_title").value;
    var post_image = document.getElementById("post_image").value;
    var post_content = document.getElementById("post_content").value;
    var post_labels = document.getElementById("post_labels").value;
    if(post_title === "" && post_content === ""){
        return;
    }else{
        $.ajax({
            type: "post",
            url: "./create/process_create",
            enctype: 'multipart/form-data',
            data: "post_title="+post_title+"&post_image="+post_image+"&post_content="+post_content+"&post_labels="+post_labels,
            success: function(data){
                $('#stage').hide();
                var stage = document.getElementById('stage');
                stage.innerHTML = data;
                $('#stage').show(500);
            }
        });
    }
});

我的 CodeIgniter 處理程序：

public function process_create(){
        $file = $this->input->post('post_image');
        if(!empty($file)){
            $image_name = $this->input->post('post_title').'_'.$this->main_model->get_unique_number();

            $result = $this->do_upload($image_name);

            if($result['result'] == 'success'){
                $image_name = $result['file_name'];
                $url = $this->main_model->create($image_name);
                if($url){
                    redirect('/'.$url);
                }
            }
        }else{
            echo 'Empty.';
            $url = $this->main_model->create();
            if($url){
                redirect('/'.$url);
            }
        }

        return FALSE;
    }

    public function do_upload($file_name){
        $config['upload_path'] = './images/uploads/';
        $config['allowed_types'] = 'gif|jpg|jpeg|png|JPEG|JPG|PNG';
        $config['file_name'] = $file_name;
        $config['max_size'] = '500';
        $config['max_width'] = '500';
        $config['max_height'] = '500';

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

        if(!$this->upload->do_upload('post_image')){
            //if the upload has failed
            $title = 'Image Upload Error';
            $error = array('error' => $this->upload->display_errors());

            $this->load->view('error', $error);

            $result['result'] = 'failed';

            return $result;
        }else{
            //if the upload was successful
            $image_data = $this->upload->data();
            $image_name = $image_data['file_name'];

            $result['file_name'] = $image_name;
            $result['result'] = 'success';
            echo 'Success';
            return $result;
        }
    }

我的 HTML：

<div class='form-group'>
    <label for='post_title'>Title:</label>
    <input type='text' class='form-control' name='post_title' id='post_title' placeholder='Type title here...'>
</div>
<div class='form-group'>
    <label for='post_image'>Select photo:</label>
    <input type='file' name='post_image' id='post_image'>
</div>
<div class='form-group'>
    <label for='post_content'>Content:</label>
    <textarea class='form-control' name='post_content' id='post_content' placeholder='Type content here...'></textarea>
</div>
<div class='form-group'>
    <label for='post_labels'>Labels:</label>
    <input type='text' class='form-control' name='post_labels' id='post_labels' placeholder='Type label/ labels here, separate labels by comma...'>
</div>
<div class='form-group'>
    <button class='btn btn-success' type='button' id='create_post'>Submit</button>
</div>

CodeIgniter validation_errors() 返回：“您沒有選擇要上傳的文件。” 我已經研究了兩天了，請幫忙。

Answer 1

您可以在沒有表單元素的情況下使用 FormData：

var data = new FormData();
// append your file
data.append('file', $('#post_image').files[0]);
/*
    data.append(...
*/
jQuery.ajax({
    url: './create/process_create',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data){
        // action on success
    });