Question

我有一个运行ajax的CRUD，但是我想实现文件上传。

除了图像上传外，其他所有东西都可以正常工作，图像是唯一未保存在数据库和文件夹上的东西，所有其他数据都正在保存。这是我的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"的末尾添加一个'/'。这样，您就有了完整的图像路径。

也请注意，上传这样的图像会将图像保存在您提供的路径中的服务器上。这意味着您需要将文件名存储在数据库中。因此，请确保'Image' =>$data2['upload_data']['file_name']实际上具有正确的文件名，以便从db查询该文件名时，可以在./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将图像上传到数据库

2 个答案: