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

时间:2022-11-24 13:21:54

how could I have an upload image directly to my database With moving into local directory using codeigniter Framework with JQuery & AJAX? here's my codes where I used an AJAX code for my modal in HTML and Controller to my functions. can you please help me to fix it?

我如何直接将数据上传到我的数据库使用带有JQuery和AJAX的codeigniter Framework进入本地目录?这是我的代码,我在我的函数中使用了一个AJAX代码用于HTML模型和Controller。你能帮我解决一下吗?

Here's the controller functions

这是控制器功能

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));
}

here's my AJAX

这是我的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');
        }
    });
}

and here's my form in html

这是我在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>

the above problem, I can upload my image but it can't save the file to the database when I save the form

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

1 个解决方案

#1


0  

Add this method to your controller

将此方法添加到控制器

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

and change your this code :

并更改您的以下代码:

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

to this code :

这段代码:

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

your post is should "file" because your name input is "file" not "image"

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

#1


0  

Add this method to your controller

将此方法添加到控制器

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

and change your this code :

并更改您的以下代码:

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

to this code :

这段代码:

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

your post is should "file" because your name input is "file" not "image"

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