php - 如何使用带有服务器验证的ajax在codeigniter中上传图像

Question

我有一个表单，数据通过 ajax 插入到数据库中。随着输入字段出现错误，然后在每个字段下方显示错误。

但是当我选择图片并尝试将图片名称上传到数据库时，没有任何反应，既没有将图片上传到上传路径，也没有将图片名称插入数据库。

如果图片上传错误，我什至无法显示图片上传错误。

Controller :-在我的 Controller 中，您可以看到我有一个名为 result 的数组，它有两个键 status 和 message，默认状态为 false。

在 else 部分，一个循环正在运行，它只有形式错误，没有任何类型的图像错误，这可能是不显示任何图像错误的原因。

如果没有显示错误就没有问题，但至少应该插入文件名。

function infoValidation() {

$result = array('status' => false, 'message' => array());

$this->form_validation->set_error_delimiters('<div class="text-danger">','</div>');
if ($this->form_validation->run('company_registration')) {
        $config['upload_path']       = 'assets/uploads/';
        $config['allowed_types']     = 'gif|jpg|jpeg|png';

        $this->load->library('upload',$config); 
        $this->upload->initialize($config);
        if ($this->upload->do_upload('image'))
        {
            $data['upload_data'] = $this->upload->data('file_name');
            $image_name = $data['upload_data'];
            //$result['message'] = $this->upload->display_errors();
            //$result['status'] = false;
        }
        else
        {
            $image_name = '';   
        }

        $data = array(

            'email'         => $this->input->post('email'),
            'first_name'    => $this->input->post('firstname'),
            'last_name'     => $this->input->post('lastname'),
            'pincode'       => $this->input->post('pincode'),
            'state'         => $this->input->post('state'),
            'landmark'      => $this->input->post('landmark'),
            'address'       => $this->input->post('address'),
            'state'         => $this->input->post('state'),
            'image'         => $image_name,
            'joined_date'   => date('Y-m-d H:i:s')
            );


        $result['status'] = true;

        $this->Perfect_mdl->c_insert($data);


}else {


    foreach ($_POST as $key => $value) {

        $result['message'][$key] = form_error($key);
    }
}

echo json_encode($result);

Ajax:

$("#form").submit(function(e){
    e.preventDefault();
    var me = $(this);

    $.ajax({
        url : me.attr('action'),
        dataType : 'json',
        type : 'POST',
        data : me.serialize(),
        success: function(resp) {
            console.log(resp);
            if (resp.status == true) {
                $('#myModal').modal('show');

                $(".form-group").removeClass('has-error').removeClass('has-success');
                $(".text-danger").remove();
            }else {
                $('#msg').html('<div class="alert alert-danger"><h5>Please Check Your Details</h5></div>');
                $.each(resp.message, function(key, value) {

                    var element = $("#"+key);
                        element.closest('.form-group')
                                .addClass(value.length > 0 ? 'has-error' : 'has-success')
                                .find('.text-danger').remove();

                        if(element.parent('.input-group').length) {
                            element.parent().after(value);
                        } else {
                            element.after(value);
                        }
                    // element.after(value);
                });
            }
        }
    });     
});

如何将图像上传到数据库，如果这不是正确的方法，请建议正确的方法

Answer 1

serialize() 方法无法发布文件数据。

要使用 ajax 发送文件，请使用 FormData 而不是序列化

HTML5 引入了 FormData 允许开发者动态构建表单对象，然后通过 AJAX 发送这个表单对象。

查看

<form action="Your controller method name" method="post" id="form_img" enctype="multipart/form-data" accept-charset="utf-8">
        <div>
            username : <input type="text" name="name">
            <span class="error name"></span>
        </div>
        <div>
            password : <input type="text" name="password">
            <span class="error password"></span>
        </div>
        <div>
            file : <input type="file" name="image">
            <span class="error image"></span>
        </div>
        <input type="submit" name="submit" value="submit">
        </form>

Jquery调用

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#form_img").submit(function(e){
            e.preventDefault();
            var formData = new FormData($("#form_img")[0]);

            $.ajax({
                url : $("#form_img").attr('action'),
                dataType : 'json',
                type : 'POST',
                data : formData,
                contentType : false,
                processData : false,
                success: function(resp) {
                    console.log(resp);
                    $('.error').html('');
                    if(resp.status == false) {
                      $.each(resp.message,function(i,m){
                          $('.'+i).text(m);
                      });
                     }
                }
            });
        });
    });

</script>

控制者

function test_image() {
        $this->load->library('form_validation');
        $this->form_validation->set_rules('name', 'name', 'required');
        $this->form_validation->set_rules('password', 'password', 'required');
        $this->form_validation->set_error_delimiters('<div class="text-danger">','</div>');
        if ($this->form_validation->run() == TRUE) {
            if($_FILES['image']['error'] != 0) {
                $result['status'] = false;
                $result['message'] = array("image"=>"Select image to upload");
            } else {
                $config['upload_path']       = 'images';
                $config['allowed_types']     = 'gif|jpg|jpeg|png';
                $this->load->library('upload',$config);
                $this->upload->initialize($config);
                if ($this->upload->do_upload('image'))
                {
                    $data['upload_data'] = $this->upload->data('file_name');
                    $image_name = $data['upload_data'];
                }
                else
                {
                    $image_name = '';
                }
                $data = array(

                'name'         => $this->input->post('name'),
                'password'    => $this->input->post('password'),
                'image'         => $image_name,
                'joined_date'   => date('Y-m-d H:i:s')
                );


                $result['status'] = true;
                $this->Perfect_mdl->c_insert($data);
                $result['message'] = "Data inserted successfully.";
            }
        }else {
            $result['status'] = false;
            // $result['message'] = validation_errors();
            $result['message'] = $this->form_validation->error_array();
        }
        echo json_encode($result);
    }

尝试使用此流程使用 ajax 上传图片