使用JQueryajax在codeigniter中使用模态添加图像

使用JQuery&异步传输这是我的代码，我在HTML中使用了AJAX代码作为模态，在函数中使用了Controller。你能帮我修一下吗？

以下是控制器的功能

public function ajax_edit($about_id)
{
    $data = $this->person->get_by_id($about_id);
    echo json_encode($data);
}
public function ajax_add()
{
    $data = array(
            'about_details' => $this->input->post('about_details'),
            'image' => $this->input->post('image'),
        );
    $insert = $this->person->save($data);
    echo json_encode(array("status" => TRUE));
}
public function ajax_update()
{
    $data = array(
            'about_details' => $this->input->post('about_details'),
            'image' => $this->input->post('image'),
        );
    $this->person->update(array('about_id' => $this->input->post('about_id')), $data);
    echo json_encode(array("status" => TRUE));
}

这是我的AJAX

  function add_person()
{
  save_method = 'add';
  $('#form')[0].reset(); // reset form on modals
  $('#myModal').modal('show'); // show bootstrap modal
  $('.modal-title').text('Add About US'); // Set Title to Bootstrap modal title
}
function edit_person(about_id)
{
  save_method = 'update';
  $('#form')[0].reset(); // reset form on modals
  //Ajax Load data from ajax
  $.ajax({
    url : "<?php echo site_url('about/ajax_edit/')?>/" + about_id,
    type: "GET",
    dataType: "JSON",
    success: function(data)
    {
        $('[name="about_id"]').val(data.about_id);
        $('[name="about_details"]').val(data.about_details);
        $('[name="file"]').val(data.image);

        $('#myModal').modal('show'); // show bootstrap modal when complete loaded
        $('.modal-title').text('Edit Person'); // Set title to Bootstrap modal title
    },
    error: function (jqXHR, textStatus, errorThrown)
    {
        alert('Error get data from ajax');
    }
});
}
function reload_table()
{
  table.ajax.reload(null,false); //reload datatable ajax 
}
function save()
{
  var url;
  if(save_method == 'add') 
  {
      url = "<?php echo site_url('about/ajax_add')?>";
  }
  else
  {
    url = "<?php echo site_url('about/ajax_update')?>";
  }
   // 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
           $('#myModal').modal('hide');
           reload_table();
        },
        error: function (jqXHR, textStatus, errorThrown)
        {
            alert('Error adding / update data');
        }
    });
}

这是我的html 表格

<div class="modal fade" id="myModal" role="dialog">
<div class="example-modal">
    <div class="modal">
        <div class="modal-dialog">
            <div class="modal-content ">
                <div class="modal-header bg-green-gradient">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title ">  <i class="fa fa-info-circle"></i> Add info on About us</h4>
                </div>
                <div class="modal-body form">
                  <form action="#" id="form">
                   <input type="hidden" value="" name="about_id"/> 
                        <!--                            <div class="form-group has-feedback ">
                                                        <label>Date</label>
                                                        <input type="date" id="date" class="form-control" input-sm placeholder="Date"/>
                                                    </div>-->
                        <div class="form-group has-feedback">
                            <label>About Details</label>
                            <input type="text" id="title" name="about_details" class="form-control" input-sm placeholder="About Details"/>
                        </div>


                        <!-- Description -->
                    <!--    <div class="form-group has-feedback">
                           <label>Image</label>
                            <?php $attrib = array('type'=>'text','name'=>'image','class'=>'form-control','id'=>'file'); ?>
        <?php echo form_upload( $attrib,set_value('image')); ?>

-->

                                               <div class="form-group has-feedback">
                                                        <label>Upload a Photo</label>
                                                        <input type="file" id="file" name="file" class="form-control" input-sm placeholder="upload"/>
                                                    </div>


                    </form>   
                    <div class="modal-footer">
                        <button type="button"  class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                          <button type="button" id="btnSave" class="btn btn-success"  aria-hidden="true" onclick="save()">Save</button>

上面的问题，我可以上传我的图像，但当我保存表单