在codeigniter中使用模态添加图像与JQuery ajax

时间:2016-01-02 14:48:29

标签: javascript php jquery ajax codeigniter

我如何直接将数据上传到我的数据库使用带有JQuery&amp ;;的codeigniter Framework进入本地目录AJAX?这是我的代码,我在我的函数中使用了一个AJAX代码用于HTML模型和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')); ?>

- &GT;

                                               <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>

上面的问题,我可以上传我的图片但是当我保存表单时它无法将文件保存到数据库

1 个答案:

答案 0 :(得分:0)

将此方法添加到控制器

public function upload_image($name)
{
    $config['upload_path'] = './assets/uploads';
     $config['allowed_types'] = 'gif|jpg|png|jpeg';
     $this->load->library('upload', $config);
     $this->upload->initialize($config);
      if ($this->upload->do_upload($name)){
           $gbr = $this->upload->data();
           return $gbr['file_name'];
      }else{
           return false;
      }
}

并更改此代码:

'image' => $this->input->post('image'),

到此代码:

'image' => $this->upload_image('file'),

你的帖子应该是“文件”,因为你的名字输入是“文件”而不是“图像”