0

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>
mareena
  • 93
  • 1
  • 10
  • 1
    use jquery and ajax to perform this task. – saddam Jul 06 '18 at 09:31
  • How I don't know too much about ajax and jquery can you help? – mareena Jul 06 '18 at 09:52
  • you want image to be save in database or just preview into a particular div when you select image from your pc ? – saddam Jul 06 '18 at 10:01
  • I have edited the post please check. – mareena Jul 06 '18 at 10:13
  • you may go through this [tutorial](https://code.tutsplus.com/tutorials/how-to-upload-files-with-codeigniter-and-ajax--net-21684) – saddam Jul 06 '18 at 10:30
  • This needs the database connectivity. – mareena Jul 06 '18 at 17:50
  • If I'm following this correctly the flow is as follows: user uploads image and you want the same image to be previewed in the same page (without refresh) except you want it flipped? Am I correct? If not describe the flow step by step as if talking to a toddler :) – Alex Jul 06 '18 at 23:30
  • I want the flipped image in another div without refreshing the page, the flipping is done in controller – mareena Jul 06 '18 at 23:40

2 Answers2

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!

mareena
  • 93
  • 1
  • 10
0

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

ClaudiusDan
  • 223
  • 1
  • 12