无法在Codeigniter上使用ajax上传图像

Question

我需要使用bootstrap模式上传图像文件。但似乎遇到了这样的错误

我不知道还能做什么。有人能帮我吗？

HTML观看次数

<div class="modal fade" id="modal_add_new_supplier_product" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">New product form</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" enctype="multipart/form-data" accept-charset="utf-8" id="form_add_newproduct"  method="post" action="">
                        <div class="form-group row">
                            <div class="col-lg-4 col-md-4 col-sm-4">Product image</div>
                            <div class="col-lg-8 col-md-8 col-sm-8">
                                <input type="file" name="product_image" id="product_image"  />
                                <span id="product_image_status" class="label label-danger"></span>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-default">No</button>
                    <button type="button" class="btn btn-success btn-sm" onclick="uploadImage()">Insert new product</button>
                </div>
            </div>
        </div>
    </div>

要上传的剧本

function uploadImage() {
        // send the image_data
        var image_data = $('#product_image').prop('files')[0];
        $.ajax({
            type:'POST',
            url : '<?php echo site_url('suppliers/upload_image') ?>',
            data:image_data,
            cache:false,
            contentType: false,
            processData: false,
            success : function(data) {
                console.log(data);
                $('#modal_add_new_supplier_product').modal('hide');
                $('body').removeClass('modal-open');
                $('.modal-backdrop').remove();

                $('#modal_add_new_supplier_product').on('hidden.bs.modal',function(){
//                        window.location.reload();
                })
            }
        });
}

控制器：

public function upload_image()
    {
        echo json_encode($this->input->post()).'<br/>';
        $image_path = realpath(APPPATH . '../images');
        echo $image_path.'<br/>';
        $config =  array(
            'upload_path'     => $image_path,
            'upload_url'      => base_url()."/images/",
            'allowed_types'   => "gif|jpg|png|jpeg",
            'overwrite'       => TRUE,
            'max_size'        => "2000KB",
            'max_height'      => "768",
            'max_width'       => "1024"
        );

        $this->load->library('upload', $config);
        if($this->upload->do_upload())
        {
            echo 'success';
        }else
        {
            print_r( $this->upload->display_errors());
        }
    }