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

问题描述

我正在尝试将文件类型输入中的值与文本输入中的数据一起发送/上传到CodeIgniter中的do_upload()函数.

I am trying to send/ upload a value from an file type input along with data from text inputs to the my do_upload() function in CodeIgniter.

我一直在这里和其他网站上研究如何执行此操作，并在我的代码中应用了这些代码，但还算运气不好，它仍然行不通.我不想使用FormData，因为我不想在表单"上添加<form>元素.

I been researching here and on other websites about how to do this and applied the codes in mine, but with no luck yet, it still won't work. I do not want to use FormData since I don't wanna add a <form> element on my "form".

这是我的jQuery和Ajax:

Here is my jQuery and 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处理程序:

My CodeIgniter Handler:

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>

CodeIgnitervalidation_errors()返回以下内容:您没有选择要上传的文件.我已经为此工作了两天，请帮忙.

The CodeIgniter validation_errors() return this: 'You did not select a file to upload.'I've been working on this for two days, please help.

推荐答案

您可以使用不带表单元素的FormData:

You can use FormData without a form element:

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
    });

这篇关于使用Ajax和jQuery在CodeIgniter PHP中上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！