2016-03-22 63 views
-1

我想用codeigniter框架上傳帶有ajax函數的圖像。 $ this-> upload-> do_upload('file'),以及如何獲取像codeigniter中的圖像文件的所有細節,我們使用$ _FILE()。使用codeigniter框架上傳帶有ajax函數的圖像

控制器

class Upload extends CI_Controller{ 
#code 
public function index(){   
    $this->load->view('upload'); 
} 
public function do_upload(){  
    if(!empty($_FILES)){ 
     $config = array(
      'upload_path' => './uploads/', 
      'allow_types' => 'gif|jpg|jpeg|png|JPG|JPEG|PNG|GIF', 
      'max_size' => '1024', 
      'max_width' => '1024', 
      'max_height' => '1000', 
      'encrypt_name' => TRUE, 
      'overwrite' => TRUE 
     ); 
     $this->load->library('upload', $config); 
     //$this->upload->initialize($config); 

     echo "test1 :<br/>"; 
     print_r($this->upload->do_upload('file')); 
     echo "test2 : <br/>"; 

     if(!$this->upload->do_upload('file')){ 
      echo "unable to upload images"; 
     }else{ 
      $data = $this->upload->data(); 
      $this->thumb($data); 
      $file = array(
       'filename' => $data['file_name'] 
      ); 
      $this->upload_model->imageupload($file); 
      $data = array('upload_data'=>$this->upload->data()); 
     } 
     //redirect(site_url('upload')); 
    } 
} 
} 

查看 圖片上傳

腳本

<script type="text/javascript"> 

    $(document).ready(function(){ 


     $('#userfile').change(function(){ 

      //$('.img_pre').attr('src','<?php echo base_url(); ?>uploads/ProgressBar.gif'); 

      $('#btn_upload').submit(); 

     }); 

     var inputFile = $('input[name=userfile]'); 

     var uploadURL = '<?= site_url('upload/do_upload')?>'; 

     $('#btn_upload').on('click', function(e){ 

      e.preventDefault(); 

      $('.img_pre').attr('src','<?php echo base_url(); ?>uploads/ProgressBar.gif'); 

      var fileToupload = inputFile[0]. files[0]; 

      if (fileToupload != 'undefined') { 

       //code 

       var formData = new FormData(); 

       formData.append('file', fileToupload); 

       $.ajax({ 

       type: 'POST', 

       url : uploadURL, 

       data: formData, 

       //dataType: 'json', 

       async: false, 

       processData:false, 

       contentType:false, 

       cache: false, 

       success: function(data){ 


       } 

       }); 

      }else{ 

       alert("Error :"+data); 

      } 

     }); 

    }); 

    </script> 
+0

你會想在Javascript中圖像的數據?或在codeignitor'do_upload()'函數中的圖像數據? –

回答

0

正如下文稱爲手動

$這 - > upload->數據()


這是一個輔助函數返回一個包含所有的數組與您上傳的文件相關的數據。這裏是數組原型:

Array 
(
    [file_name] => mypic.jpg 
    [file_type] => image/jpeg 
    [file_path] => /path/to/your/upload/ 
    [full_path] => /path/to/your/upload/jpg.jpg 
    [raw_name]  => mypic 
    [orig_name] => mypic.jpg 
    [client_name] => mypic.jpg 
    [file_ext]  => .jpg 
    [file_size] => 22.2 
    [is_image]  => 1 
    [image_width] => 800 
    [image_height] => 600 
    [image_type] => jpeg 
    [image_size_str] => width="800" height="200" 
) 

在你的情況$的數據將保存這些信息