**image id here**
//how could i get input type image file in .ajax and than send it to controller through url in ajax and how to validate image in controller.
<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 is here
$('#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');
is not setting or accepting the object of image file
please correct this controller is here:
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();
}
}
//thanks in advance :)
