Загрузка изображения в форму с помощью codeigniter/ajax

Question

Что делать, если я не могу загрузить изображение в форме, которую она успешно создала, но файл показывает 0, а не файл для загрузки. пожалуйста, помогите мне заблаговременно!

сценарий с точки зрения, где я могу обновить и добавить одну форму с возможностью загрузки

<script type="text/javascript"> 

var save_method; //for save method string 
var table; 
$(document).ready(function() { 
    table = $('#dataTable2').DataTable({ 

    "processing": true, //Feature control the processing indicator. 
    "serverSide": true, //Feature control DataTables' server-side processing mode. 

    // Load data for the table's content from an Ajax source 
    "ajax": { 
     "url": "<?php echo site_url('about/ajax_list')?>", 
     "type": "POST" 
    }, 

    //Set column definition initialisation properties. 
    "columnDefs": [ 
    { 
     "targets": [ -1 ], //last column 
     "orderable": false, //set not orderable 
    }, 
    ], 

    }); 
}); 

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="images"]').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(); 
      if (empty($_FILES['image'])) {   
     return FALSE; 
    } 
     }, 
     error: function (jqXHR, textStatus, errorThrown) 
     { 
      alert('Error adding/update data'); 
     } 
    }); 
} 

function delete_person(about_id) 
{ 
    if(confirm('Are you sure delete this data?')) 
    { 
    // ajax delete data to database 
     $.ajax({ 
     url : "<?php echo site_url('about/ajax_delete')?>/"+about_id, 
     type: "POST", 
     dataType: "JSON", 
     success: function(data) 
     { 
      //if success reload ajax table 
      $('#myModal').modal('hide'); 
      reload_table(); 
     }, 
     error: function (jqXHR, textStatus, errorThrown) 
     { 
      alert('Error adding/update data'); 
     } 
    }); 

    } 
} 

Это моя форма

<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')); ?> 

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

мой контроллер для добавления и обновления

public function ajax_add() 
{ 

    $data = array(
      'about_details' => $this->input->post('about_details'), 
      'image' => $this->upload->do_upload('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->upload->do_upload('image'), 

     ); 
    $this->person->update(array('about_id' => $this->input->post('about_id')), $data); 
    echo json_encode(array("status" => TRUE)); 
} 

Answer 1

То, что я обнаружил на загрузку через AJAX в CodeIgniter является то, что, когда мы подаем форму изображения не получает загружены. Из-за этого я использовал дополнительный файл js «jquery.form.min.js», и загрузка ajax прошла хорошо. Для того, чтобы реализовать сценарий будет выглядеть следующим образом:

$('#uploadimg').ajaxForm({ 
     //uploadimg is my form id    
     dataType: 'json', 
     success: processJson 
}); 
function processJson(data) { 
     if(data.msg=="success"){ 
      alert('Upload is successful.'); 
     } 
     else{ 
      alert('Upload couldn't be completed.'); 
     } 
} 

Форма будет

<form action="<?=base_url();?>controller/uploadImage/" method="post" enctype="multipart/form-data" id="uploadimg"> 

На submition это будет вызывать функцию uploadImg в контроллере и здесь сохранение изображения и вставки в базе данных делается ,

public function uploadImage(){ 
    //$id = $this->session->userdata('uid'); 
    $config[ 'upload_path' ] = UPLOAD_DIR.'/newsletter/0'; 
    $config[ 'allowed_types' ] = 'gif|jpg|png'; 
    $config[ 'max_size' ]  = '1500'; 
    $config[ 'max_width' ]  = '1000'; 
    $config[ 'max_height' ] = '1500'; 
    $image_name    = "files"; 
    $this->load->library('upload', $config); 
    if ($this->upload->do_upload($image_name)) { 
      $upload_data = $this->upload->data(); 
      if(!empty($upload_data)){ 
       $arg = array(
          'name' => $upload_data[ 'file_name' ] 
       ); 
       $this->modelName->insert($arg); 
       $data['msg']="success"; 
      } 
      else{ 
       $data['errmsg']="Couldnot upload the file!"; 
      } 
    } 
    else{ 
     $data['errmsg'] =$this->upload->display_errors(); 
    } 
    echo json_encode($data); 
} 

Теперь это вызовет функцию processJson в скрипте. И загрузка показывает результат.

Вы можете найти файл javascript на jquery.form.js.

Я надеюсь, что это сработает для вас.