Codeigniterでajaxを使用して画像をアップロードできません

Question

ブートストラップモーダルを使用して画像ファイルをアップロードする必要があります。しかし、それは、私は他に何をすべきかわからない、このようなエラーに

に遭遇したようです。誰か助けてくれますか？

HTMLビュー：

<div class="modal fade" id="modal_add_new_supplier_product" tabindex="-1" role="dialog"> 
     <div class="modal-dialog" role="document"> 
      <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> 
        <h4 class="modal-title">New product form</h4> 
       </div> 
       <div class="modal-body"> 
        <form class="form-horizontal" enctype="multipart/form-data" accept-charset="utf-8" id="form_add_newproduct" method="post" action=""> 
         <div class="form-group row"> 
          <div class="col-lg-4 col-md-4 col-sm-4">Product image</div> 
          <div class="col-lg-8 col-md-8 col-sm-8"> 
           <input type="file" name="product_image" id="product_image" /> 
           <span id="product_image_status" class="label label-danger"></span> 
          </div> 
         </div> 
        </form> 
       </div> 
       <div class="modal-footer"> 
        <button data-dismiss="modal" class="btn btn-default">No</button> 
        <button type="button" class="btn btn-success btn-sm" onclick="uploadImage()">Insert new product</button> 
       </div> 
      </div> 
     </div> 
    </div> 

---

スクリプトアップロードする：

function uploadImage() { 
     // send the image_data 
     var image_data = $('#product_image').prop('files')[0]; 
     $.ajax({ 
      type:'POST', 
      url : '<?php echo site_url('suppliers/upload_image') ?>', 
      data:image_data, 
      cache:false, 
      contentType: false, 
      processData: false, 
      success : function(data) { 
       console.log(data); 
       $('#modal_add_new_supplier_product').modal('hide'); 
       $('body').removeClass('modal-open'); 
       $('.modal-backdrop').remove(); 

       $('#modal_add_new_supplier_product').on('hidden.bs.modal',function(){ 
//      window.location.reload(); 
       }) 
      } 
     }); 
} 

---

コントローラ：

012画像やマルチメディアのために

public function upload_image() 
    { 
     echo json_encode($this->input->post()).'<br/>'; 
     $image_path = realpath(APPPATH . '../images'); 
     echo $image_path.'<br/>'; 
     $config = array(
      'upload_path'  => $image_path, 
      'upload_url'  => base_url()."/images/", 
      'allowed_types' => "gif|jpg|png|jpeg", 
      'overwrite'  => TRUE, 
      'max_size'  => "2000KB", 
      'max_height'  => "768", 
      'max_width'  => "1024" 
     ); 

     $this->load->library('upload', $config); 
     if($this->upload->do_upload()) 
     { 
      echo 'success'; 
     }else 
     { 
      print_r($this->upload->display_errors()); 
     } 
    } 

Answer 1

、あなたは以下のようにスクリプトを変更し'multipart/form-data',などのコンテンツタイプを使用する必要があります。

function uploadImage() { 
     // send the image_data 
     var image_data = $('#product_image').prop('files')[0]; 
     $.ajax({ 
      type:'POST', 
      url : '<?php echo site_url('suppliers/upload_image') ?>', 
      data:image_data, 
      cache:false, 
      contentType: 'multipart/form-data',, 
      processData: false, 
      success : function(data) { 
       console.log(data); 
       $('#modal_add_new_supplier_product').modal('hide'); 
       $('body').removeClass('modal-open'); 
       $('.modal-backdrop').remove(); 

       $('#modal_add_new_supplier_product').on('hidden.bs.modal',function(){ 
//      window.location.reload(); 
       }) 
      } 
     }); 
} 

また、あなたは画像データを取得していない場合にはdata: $('#file').attr('files'),としてデータを使用することができます。