I want to upload an image with first name and last name without refreshing the page in codeigniter - ajax

Question

This is my controller
function edit_profile() {
// if (isset($_POST['submit']))
//{
$session_data = $this->session->userdata('logged_in');
$id = $session_data['id'];
$name = $session_data['name'];
$uploaddata = null;
$config['upload_path'] = './assets/uploads/userpic';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = '10000';
$Img_name= strtotime(date("d-m-y H:i:s")).".jpg";
//$Img_name= strtotime(date("d-m-y H:i:s"));
$config['file_name']= $Img_name ;
$config['overwrite'] = "true";
$this->load->library('upload', $config);
if (!$this->upload->do_upload('documents')) {
$error = array('error' => $this->upload->display_errors());
} else {
$uploaddata = array('upload_data' => $this->upload->data());
}
$upload_data = $this->upload->data();
$file_name = $name;
$filepath1= $config['upload_path'];
if(!is_uploaded_file($_FILES['documents']['tmp_name'])) {
echo 'No upload';
$data = array(
'name' => $this->input->post('firstname'),
'lname' => $this->input->post('lastname')
);
}else
{
echo "file uploaded";
$data = array(
'name' => $this->input->post('firstname'),
'lname' => $this->input->post('lastname'),
'filepath'=> $Img_name,
'filename'=>$file_name
);
}
$this->load->model('update_model');
$this->update_model->update_entry($id, $data); //passing control to update_model
$session_data['name'] = $this->input->post('firstname');
$this->session->set_userdata('logged_in', $session_data); //settting sesssin values
if( $data)
{
$data['message']="Image Uploaded Successfully";
$this->load->view('endusers/endemp_edit_profile_view',$data);
}
//redirect('endusers/end_emp_home');
//}
}
This is my view
<?php echo form_open_multipart('endusers/editprofile/edit_profile');?>
<table width="auto" border="1" style="border-color: #bce8f1;"class="table table-bordered" >
<tbody>
<tr>
<td colspan="2"><input type="text" class="txt-field uname" name="firstname" placeholder="first name" required></td>
</tr>
<! ------ <tr>
<td colspan="2"><input type="text" class="txt-field pass" name="lastname" placeholder="last name" required ></td><br>
</tr>
<tr>
<tr>
<td valign="top">
<label for="curtexp" style="margin-top: 20px;padding-right: 7px;margin-left: 11px;"> Upload a Profile Picture </label> <label class="error" ></label>
<input type="file" name="documents" size="40" / style="margin-left: 9px;" placeholder="Profile Picture"><br><br>
</td>
</tr>
<tr>
<td colspan="8" style="text-align:center">
<br />
<div class="ee">
<input type="submit" class="btn btn-primary" value="Update" class="buttonmy2" / style="float: left; margin-bottom: 17px;">
<input type="Reset" class="btn btn-primary" value="Reset" class="buttonmy2" / style="float: left;margin-left: 10px;">
<?php echo validation_errors(); ?>
</div>
</td>
</tr>
</tbody>
</table>
</form>
This is my code in codeigniter for uploading a profile pic but it takes ma to log out to see the uploaded image .I want tom upload a image without logging out of my account and may be jusr refreshing the page

Answer 1

--This Jquery plugin will solve your problem
--More help http://malsup.com/jquery/form/#getting-started
<script src="http://malsup.github.com/jquery.form.js"></script>
$("#form_id").on('submit', (function (e) {
var options = {
url:'your URL', // target element(s) to be updated with server response
success:function(data){
alert('submitted');
}
$(this).ajaxSubmit(options);
e.preventDefault();
}));
Comment me if you need help...