Загрузить изображение в базу данных, используя Ajax и Codeigniter - PullRequest
Новая
       10

Загрузить изображение в базу данных, используя Ajax и Codeigniter

0 голосов
/ 13 сентября 2018

У меня CRUD с рабочим ajax, но я хочу осуществить загрузку файла в него.

Все отлично работает, кроме загрузки изображений, изображение - это единственное, что не сохраняется в базе данных и папке, все остальные данные сохраняются. Это мой CRUD контроллер (только часть добавления), где я реализовал код загрузки (dados) 

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class dados extends CI_Controller {
 public function __construct()
    {
        parent::__construct();
        $this->load->helper(array('form', 'url'));
        $this->load->model('dados_model');
        $this->load->database();
    }

public function index()
{
    $data['dados']=$this->dados_model->get_all_dados();
    $this->load->view('dados_view',$data);
}
public function dados_add()
    {       
$config = array(
'upload_path' => "./assets/uploads",
'allowed_types' => "gif|jpg|png|jpeg|pdf",
'overwrite' => TRUE,
'max_size' => "2048000", 
 );
$this->load->library('upload',$config);

$this->upload->do_upload('userfile');

$data2=array('upload_data' => $this->upload->data());

    $data = array(
                'Name' => $this->input->post('Name'),
                'City' => $this->input->post('City'),
                'address' => $this->input->post('address'),
                'lastname' => $this->input->post('lastname'),
                'Image' =>$data2['upload_data']['file_name']
            );
     $this->dados_model->dados_add($data);

        echo json_encode(array("status" => TRUE));
    }

    public function ajax_edit($id)
    {
        $data = $this->dados_model->get_by_id($id);
        echo json_encode($data);
    }

А это моя модель, я использую ее для хранения данных в базе данных (dados_model) 

<?php
 defined('BASEPATH') OR exit('No direct script access allowed');

  class dados_model extends CI_Model
  {

var $table = 'dados';
public function __construct()
{
    parent::__construct();
    $this->load->database();
}
    public function get_all_dados()
    {
     $this->db->from('dados');
     $query=$this->db->get();
     return $query->result();
    }

public function get_by_id($id)
{
    $this->db->from($this->table);
    $this->db->where('ID',$id);
    $query = $this->db->get();

    return $query->row();
}

public function dados_add($data)
{
    $this->db->insert($this->table, $data);
    return $this->db->insert_id();
}

Это мой код Ajax для сохранения 

<script type="text/javascript">
$(document).ready( function () {
  $('#table_id').DataTable();
   } );
   var save_method; //for save method string
   var table;

function add_person()
{
  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 save()
{
  var url;
  if(save_method == 'add')
  {
      url = "<?php echo site_url('dados/dados_add')?>";
  }
  else
  {
    url = "<?php echo site_url('dados/dados_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
           $('#modal_form').modal('hide');
          location.reload();// for reload a page
        },
        error: function (jqXHR, textStatus, errorThrown)
        {
            alert('Error adding / update 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>
    <h3 class="modal-title">dados Form</h3>
    </div>
    <div class="modal-body form">


    <form action="#"  method="post" enctype="multipart/form-data" id="form" 
    class="form-horizontal">
      <input type="hidden" value="" name="ID"/>
      <div class="form-body">
        <div class="form-group">

          <label class="control-label col-md-3">Name</label>
          <div class="col-md-9">
            <input name="Name" placeholder="" class="form-control" 
            type="text">
          </div>
        </div>

        <div class="form-group">
          <label class="control-label col-md-3">City</label>
          <div class="col-md-9">
            <input name="City" placeholder="City" class="form-control" 
           type="text">
          </div>
        </div>

           <div class="form-group">
           <label class="control-label col-md-3">Address</label>
           <div class="col-md-9">
           <input name="Address" placeholder="" 
            class="form-control" type="text">

          </div>
          </div>

            <div class="form-group">
            <label class="control-label col-md-3">Last Name</label>
            <div class="col-md-9">
            <input name="lastname" placeholder="" class="form-control" 
             type="text">

                </div>
                </div>
                <div class="form-group">
                 <label class="control-label col-md-3">Image</label>
                 <div class="col-md-9">
                <input type="file" name="userfile" placeholder="" class="form-control">
            </div>
      </div>                            
     </div>
    </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-danger" data- 
         dismiss="modal">Cancel</button>
        <input type ="submit" name="submit" value="Salvar"  id="btnSave " 
        onclick="save()" class="btn btn-primary" />
        </div>

         </form>
     </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
 <!-- End Bootstrap modal -->

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 14 сентября 2018

после поиска некоторых кодов ajax, это то, что у меня сработало

Я изменил свою функцию сохранения ajax на эту 

function save()
{
  var url;
  if(save_method == 'add')
  {
      url = "<?php echo site_url('dados/dados_add')?>";
  }
  else
  {
    url = "<?php echo site_url('dados/dados_update')?>";
  }

    $('#form').submit(function(e) 
    {


       $.ajax({
        url : url,
        type: "POST",
        data: new FormData(this),
        dataType: "JSON",
         processData:false, 
         contentType:false,
         cache:false,
         async:false,
        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');
        }
       });
      });
      }
0 голосов
/ 13 сентября 2018

Сначала попробуйте добавить '/' в конец кода 'upload_path' => "./assets/uploads" в вашем коде. Таким образом, у вас есть полный путь к изображению.

Кроме того, чтобы вы знали, загрузка подобного изображения сохранит его на вашем сервере по указанному пути. Это означает, что вам нужно сохранить имя файла в базе данных. Так что убедитесь, что 'Image' =>$data2['upload_data']['file_name'] действительно имеет правильное имя файла, чтобы при запросе этого имени файла из базы данных его можно было найти по адресу ./assets/uploads/filename на вашем сервере.

Кроме того, Что вы получите, если у вас var_dump ($ data2 ['upload_data'] ['file_name'])?

Что вы получите, если у вас var_dump ($ this-> upload-> display_errors ()) после вызова do_upload?

...