When the image gets uploaded ,it will load in the same page.The page will not get refreshed.


Before Uploading Image

After Uploading Image using Iframe


Folder Structure


ImageUpload.php - Controller
<?php

class ImageUpload  extends Controller {



public function __construct() {

parent::Controller();

$this->load->helper(array('form','url'));

$this->load->library('validation');

}



function index() {

$this->load->view('imageUpload');

}



/*display image uploading interface and display uploaded image

*/

function display_upload() {

if (isset($_FILES['image'])) {

$date = date("Ymdhis");

$imageNewName = $date.'_'.$_FILES['image']['name'];

$config['upload_path'] = './photos/'; /* NB! create this dir! */

$config['allowed_types'] = 'jpg|jpeg|png|pjpeg|x-png|X-PNG|gif';

$config['max_size']  = '2048';

$config['file_name']  = $imageNewName;

$config['remove_spaces']  = TRUE;



/* Load the upload library */

$this->load->library('upload', $config);



$upload = $this->upload->do_upload('image');



if ($upload) {

?>



<script type="text/javascript" language="javascript">

window.parent.setUploadedImage('<?php echo $imageNewName; ?>','<?php echo $this->config->item('base_url').'photos/'.$imageNewName?>', '<?php echo $file_temp_name?>', '<?php echo $div_id?>');

</script>

<?php

}

else {

?>

<script type="text/javascript" language="javascript">

alert('<?php echo $this->upload->display_errors();?>');



</script>

<?php

}



}

else {

$err = true;

}



?>



<?php

$this->load->view('uploading_interface');

}

}

?>


uploading_interface.php - View (Iframe)
<div>

<form name="iform" action="<?php echo $PHP_SELF;?>" method="post" enctype="multipart/form-data">

<input id="file" type="file" name="image" onChange="iform.submit();window.parent.upload(this,'<?php echo $this->config->item('base_url')?>');" /><br>

<span style="font-size:11px; color:#666666;">only gif, png, jpg files.</span>

<input type="hidden" value="" name="div_id" />

</form>

</div>


imageUpload.js - javascript
//Call at the time of upload

function upload(fileObj,url){



    var par = window.document;

    var frm = fileObj.form;

    var div_id = parseInt(Math.random() * 100000);



   // add image progress

    var images = par.getElementById('images_container');

    images.innerHTML = '';

    var new_div = par.createElement('div');

    new_div.id = div_id;

    // send

    frm.div_id.value = div_id;



}



//Call when upload completed

function setUploadedImage(imgName,imgSrc, fileTempName, divId) {

    var par = window.document;

    var images = par.getElementById('images_container');

    var new_div = par.createElement('div');



    //    new_div.id = div_id;

    var new_img = par.createElement('img');

    new_img.setAttribute("width", '100');

    new_img.setAttribute("height", '150');

    new_img.src = '../photos/indicator2.gif';



    new_div.appendChild(new_img);

    images.appendChild(new_div);



    new_img.src = imgSrc;



}



imageUpload.php - View
<script language="javascript" type="text/javascript" src="<?php echo $this->config->item('base_url'); ?>js/imageUpload.js"></script>



<form method="post" id="signin" action="<?php echo $this->config->item('base_url'); ?>ImageUpload/saveImageIntoDB" autocomplete="off" enctype='multipart/form-data' class="common-forms">

<input type="hidden" name="addedImg" id="addedImg" value="<?php echo set_value('addedImg')?>">



Title : <input type="text" name="txtTitle" id="txtTitle">

<div id="iframe_container">

<iframe src="<?php echo $this->config->item('base_url'); ?>ImageUpload/display_upload" frameborder="0" style="height:75px;"></iframe>

</div>



<div id="main">

<div id="images_container">



</div>

</div>

<input value="Submit" tabindex="2" type="submit"/>



</form>