如何在不刷新整个页面的情况下将数据加载到页面的特定部分php-codeigniter

Question

Sorry if you find this question wrong. In my website, I have two divs, one div contains the image selected by the user, I have previewed it by Jquery. Then in controller I fetch this image and applied flip operation of Codeigniter, now my question is How to load the second div with flipped image (which will come from controller) without refreshing the whole page? I have three div's, how to load data in only a particular div without reloading the complete page in php-codeigniter?

I know about this link but here data is coming from database, which is not in my case. So how to call data in a particular div without loading the whole page? As I have to upload an image from controller This is my controller code:

$filedata = $this->upload->data();
$data['img2'] = base_url().'/assets/images/'.$filedata['file_name'];  
$this->load->view('pages/flipped',$data); 

This is view code:

<div class="invert-grid-item invert">
<label>Upload Image</label>
<input type='file' name="userfile" size="20">
<img id="blah" src="#" alt="" />
</div>
<div class="invert-grid-item invert" id="result"></div>
<button id="uploaded_images" type="submit">Invert</button>

JS code

<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
   .width(200)
   .height(200);        };
reader.readAsDataURL(input.files[0]);
}
}
$('#files').on('click',function(){
var files = $('#files')[0].files;
$.ajax({
url:"<?php echo base_url(); ?>pages/flip", 
method:"POST",
success:function(data)
{
 $('#uploaded_images').html(data);
 $('#result').val('');
}
})
});
</script>

Answer 1

Solved my problem, made an ajax call with JQuery:

$(document).ready(function(){  
$('#upload_form').on('submit', function(e){  
e.preventDefault();  
if($('#userfile').val() == '')  
{  
alert("Please Select the File");  
}  
else  
{  
$.ajax({  
    url:"<?php echo base_url(); ?>pages/flip",   
    method:"POST",  
    data:new FormData(this),  
    contentType: false,  
    cache: false,  
    processData:false,  
    success:function(data)  
    {  
    $('#result').html(data);
     } 
});  
}  
});  

});

@ClaudiusDan and @saddam thanks for helping!

Answer 2

Edited answer to edited question.

Show the same image with jQuery in another div and look at this question for rotating the second div.

Rotate a div using javascript