使用 Ajax 和 Codeigniter 将图像上传到数据库

Question

我有一个 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>

Answer 1

首先，尝试在代码中的 'upload_path' => "./assets/uploads" 末尾添加一个“/”。这样你就有了一个完整的图像路径。

另外，请注意，上传这样的图片会将图片保存在您的 服务器 上提供的路径中。这意味着您需要将文件名存储在 database.So 中确保 'Image' =>$data2['upload_data']['file_name'] 实际上具有正确的文件名，以便当您从数据库中查询该文件名时，您可以在 ./assets/uploads/filename 在你的服务器上。

此外，如果你 var_dump($data2['upload_data']['file_name']) 你会得到什么？

调用 do_upload 后 var_dump($this->upload->display_errors()) 会得到什么？

Answer 2

在搜索了一些 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');
        }
       });
      });
      }

使用 Ajax 和 Codeigniter 将图像上传到数据库

Upload Image to Database using Ajax and Codeigniter

php

ajax

codeigniter

file-upload

crud