$(document).ready(function(){
$('#upload_form').on('submit', function(e){
e.preventDefault();
if($('#image_file').val() == '')
{
alert("Please Select the File");
}
else
{
$.ajax({
url:"<?php echo base_url(); ?>userlk/ajax_upload",
//base_url() = http://localhost/tutorial/codeigniter
method:"POST",
data:new FormData(this),
contentType: false,
cache: false,
processData:false,
success:function(data)
{
$('#uploaded_image').html(data);
}
});
}
});
});
<div class="container">
<br /><br /><br />
<h3><?php echo $title; ?></h3>
<form method="post" id="upload_form" enctype="multipart/form-data">
<input type="file" name="image_file" id="image_file" />
<br />
<br />
<input type="submit" name="upload" id="upload" value="Upload" />
</form>
<br />
<br />
<div id="uploaded_image">
</div>
</div>
function image_upload() {
$this->data['title'] = "Upload image";
$this->load->view('templates/header', $this->data);
$this->load->view('userlk/image_upload', $this->data);
$this->load->view('templates/footer');
}
function ajax_upload() {
if(isset($_FILES["image_file"]["name"])) {
$config['upload_path'] = './upload/';
$config['allowed_types'] = 'jpg|jpeg|png|gif';
$this->load->library('upload');
$this->upload->initialize($config);
if (!$this->upload->do_upload('image_file')) {
echo $this->upload->display_errors();
}
else {
$this->data = $this->upload->data();
echo '<img src="'.base_url().'upload/'.$this->data["file_name"].'" width="300" height="225" class="img-thumbnail" />';
}
}
}