как загрузить и сохранить изображение в моделях ajax и bootstrap

Я хочу загрузить и сохранить изображение из модальной формы начальной загрузки с помощью ajax. Я сделал кодирование для загрузки, но функция загрузки не работает вообще … Я сделал много вещей, но все еще не работает .. могу Кто-нибудь поможет мне понять, где моя ошибка на самом деле?

это мой контроллер

public function director_add()
{
$data = array(
'photo' => $this->input->post('photo'),
'designation' => $this->input->post('designation'),
'name' => $this->input->post('name'),
'education' => $this->input->post('education'),
'photo' =>$photo);

$photo='';
if(!empty($_FILES['userfile'])){
$config['upload_path'] = './img/';
$config['allowed_types'] = 'jpg|jpeg|png|gif';

//Load upload library and initialize configuration
$this->load->library('upload',$config);
$this->upload->initialize($config);
$this->upload->do_upload('userfile');
$upload_data = $this->upload->data(); //Returns array of
containing all of the data related to the file you uploaded.
$picture = $upload_data['file_name'];$insert = $this->director_model->director_add($data);
echo json_encode(array("status" => TRUE));
}

public function director_update()
{
$data = array(

'photo' => $this->input->post('photo'),
'designation' => $this->input->post('designation'),
'name' => $this->input->post('name'),
'education' => $this->input->post('education'),
'photo' =>$this->input->post('photo'),
);

$data['photo']=$this->director_model
->getImageFromId($_POST['directorID'])->photo;

if(isset($_FILES['photo']))
{
$config['upload_path'] = './img/';
$config['allowed_types'] = 'jpg|jpeg|png|gif';

//Load upload library and initialize configuration
$this->load->library('upload',$config);
$this->upload->initialize($config);
$this->upload->do_upload('photo');
$upload_data = $this->upload->data(); //Returns array of containing
all of the data related to the file you uploaded.

$data['photo'] = $upload_data['file_name'];
}$this->director_model->director_update(array('directorID' => $this-
>input->post('directorID')), $data);
echo json_encode(array("status" => TRUE));
}

Это мой взгляд на мой мод начальной загрузки, которые содержат AJAX и функцию для загрузки изображения

 $(document).ready( function () {
$('#table_id').DataTable();} );
var save_method; //for save method string
var table;function add_director()
{
save_method = 'add';
$('#form')[0].reset(); // reset form on modals
$('#modal_form').modal('show'); // show bootstrap modal
//$('.modal-title').text('Add Person'); // Set Title to Bootstrap modal
title
}function edit_director(id)
{
save_method = 'update';
$('#form')[0].reset(); // reset form on modals

//Ajax Load data from ajax
$.ajax({
url : "<?php echo site_url('index.php/director_controller/ajax_edit/')?
>/" + id,
type: "GET",
dataType: "JSON",
success: function(data)
{
$('[name="directorID"]').val(data.directorID);

$('[name="designation"]').val(data.designation);
$('[name="name"]').val(data.name);
$('[name="education"]').val(data.education);
$('[name="photo"]').val(data.photo);

$('#modal_form').modal('show'); // show bootstrap modal when
complete loaded
$('.modal-title').text('Edit Director'); // Set title to Bootstrap
modal title
},

error: function (jqXHR, textStatus, errorThrown)
{
alert('Error get data from ajax');
}
});
}function save()
{
var url;
if(save_method == 'add')
{
url = "<?php echo
site_url('index.php/director_controller/director_add')?>";
}
else
{
url = "<?php echo
site_url('index.php/director_controller/director_update')?>";
}

$('#select_image').change(function(){3
$('#upload_form').submit();
});
$('#upload_form').on('submit', function(e){
e.preventDefault();
$.ajax({
url :"upload.php",
method:"POST",
data:new FormData(this),
contentType:false,
processData:false,
success:function(data){
$('#select_image').val('');
$('#uploadModal').modal('hide');
$('#gallery').html(data);
}
})
});

// ajax adding data to database
$.ajax({
url : url,
type: "POST",
data: $('#form').serialize(),
dataType: "JSON",
success: function(data)
{
//if success close modal and reload ajax table
$('#modal_form').modal('hide');
location.reload();// for reload a page
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error adding / update data');
}
});
}

function delete_director(id)
{
if(confirm('Are you sure delete this data?'))
{
// ajax delete data from database
$.ajax({
url : "<?php echo
site_url('index.php/director_controller/director_delete')?>/"+id,
type: "POST",
dataType: "JSON",
success: function(data)
{
location.reload();
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error deleting data');
}
});

}
}

<!-- Bootstrap modal -->
<div class="modal fade" id="modal_form" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="form-group" id="photo-preview">
<label class="control-label col-md-3">Photo</label>
<div class="col-md-9">
(No photo)
<span class="help-block"></span>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnSave" onclick="save()" class="btn btn-
primary">Save</button>
<button type="button" class="btn btn-danger" data-
dismiss="modal">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->