Question

**image id here**

//如何在.ajax中获取输入类型图像文件，然后通过ajax中的url将其发送到控制器以及如何在控制器中验证图像。

<div class="form-group">
    <label>Upload Image</label>
    <div class="input-group">
        <span class="input-group-btn">
            <span class="btn btn-info btn-file">
                Browse… <input type="file" name="picture" class="form-control" style="width:100%; height: 150px;" id="picture">
            </span>
        </span>

    </div>
    <div class="thumbnail">
        <a href="/w3images/lights.jpg" target="_blank">
            <img id='img-upload' name="picture" src="" alt="upload" style="width:100%; height: 150px;">
        </a>
    </div>
    <div id="files"></div>
</div>

ajax就在这里

       $('#btnSave').click(function () {
            var e = document.getElementById("cname");
            var cname = e.options[e.selectedIndex].value;
            var pname = $('#name').val();
            var fileName ="";
            var img = $('#picture').get(0);
            //console.log(img);
            var imgFile = img.files[0];
            //var formData = new FormData();
            //formData.append('file', imgFile);


            var caption = $('#caption').val();          
            var url = '<?php echo base_url() ?>' + 'product/add';
            //console.log(url);
            $.ajax({
                type                : 'ajax',
                url                 :  url,
                method              : 'POST',
                //processData: false,
                //contentType: false,
                //secureuri           :  false,
                //fileElementId       : 'picture',
                //dataType: 'json',                        
                //data: data,
                data: {"cname": cname, "name": pname, "picture": imgFile, "caption": caption},
                // async: false,
                success: function (response) {
                    if (response){
                        $('#myModal').modal('hide');
                        $('#myForm')[0].reset();
                        $('.alert-success').html('Record Added').fadeIn().delay(4000).fadeOut('slow');

                    } else {
                        alert('Error');
                    }
                },
                error: function () {
                    alert('could not add data');
                }

            });

        });

$this->form_validation->set_rules('picture', 'picture', 'callback_image_upload');

未设置或接受图像文件的对象

请更正此信息 控制器在这里：

 public function add() {       
        $this->form_validation->set_rules("name", "name", 'required');
        $this->form_validation->set_rules("cname", "cname", 'required');
        $this->form_validation->set_rules("caption", "caption", 'required');        
        $this->form_validation->set_rules('picture', 'picture', 'callback_image_upload');

        $result['message'] = "";

        if ($this->form_validation->run()) {

            $img = $this->upload_pic('upload');

            if (isset($img['img'])) {
                $res = $img['img'];

            $data = array(
                "name" => $this->input->post("name"),
                "category_id" => $this->input->post("cname"),
                "caption" => $this->input->post("caption"),
                "image" => $res,
            );            

            $result = $this->Product_model->insert_data($data); 
         $this->Product_model->update_data($data, $id);
            if ($result) {
                $result['msgg'] = true;
            }
            echo json_encode($result); 
            } else {      

               $result['msg_err'] = 'choose at least one image or wrong file selected';      
                echo json_decode($result['msgg']);    

                            }      


        }

        $this->load->model('category_model');
        $query = $this->category_model->get_clists('', ''); 
        //print_r($query->result());die("cttt");
        if ($query->num_rows() > 0) {
            $result['records'] = $query->result_array();
        } else {
            $result['records'] = array();
        }
    }

//提前谢谢：）

Answer 1

您无法使用codeigniter form_validation库验证图像文件。

相反，您可以使用CI的文件上传类。它有自己的文件和图像验证工具。

查看https://www.codeigniter.com/userguide3/libraries/file_uploading.html

Regads

我如何在.ajax中获取输入类型图像文件，然后通过ajax中的url将其发送到控制器以及如何在控制器

1 个答案: