codeigniter ajax를 통해 입력 파일 정보 보내기

Question

제목, 가격, 이미지 및 카테고리의 4 개 필드가있는 양식이 있습니다.

제출하면 DB에 3 개의 문자열을 삽입하고 이미지를 업로드하거나 오류를 반환합니다. 그것은 모두 잘 작동합니다.

그러나 지금은 아약스로 끝내고 싶습니다.

제목, 가격 및 카테고리 필드는 제대로 작동하지만 코드 필드에서 업로드 할 수 있도록 파일 필드에서 필요한 정보를 어떻게 전달합니까?

"지금 업로드 할 파일을 선택하지 않았습니다."라는 메시지가 계속 표시됩니다.

내 컨트롤러 :

function add_new_product_ajax() 
    { 
     // make sure it's the admin, else redirect 
     if (! $this->session->userdata('is_admin')) { 
      redirect('admin/login'); 
      exit(); 
     } 

     // get product name 
     $pn = $this->input->post('product_title'); 

     // get price 
     $p = $this->input->post('price'); 

     // get category id 
     $cid = $this->input->post('categories'); 

     // upload config 
     $config['upload_path'] = './uploads/'; 
     $config['allowed_types'] = 'gif|jpg|png'; 
     $config['max_size'] = '100'; 
     $config['max_width'] = '1024'; 
     $config['max_height'] = '768'; 
     $config['overwrite'] = TRUE; 

     // load form validation 
     $this->load->library('form_validation'); 

     // validate fields 
     $this->form_validation->set_rules('product_title', 'Product Name', 'trim|required|is_unique[products.name]'); 
     $this->form_validation->set_rules('price', 'Price', 'trim|required|callback_check_price'); 
     $this->form_validation->set_rules('categories', 'Product\'s Category', 'required'); 

     // if validation failed 
     if ($this->form_validation->run($this) == FALSE) 
     { 
      // dummy var 
      $data['dummy'] = ''; 

      // load categories module to make a select list 
      $this->load->module('categories/categories'); 
      $data['options'] = $this->categories->categories_select(); 

      // load the view   
      $this->load->view('new_product_view', $data);   
     } 
     else // validation passed 
     { 
      // do upload 
      $this->load->library('upload', $config); 
      $field_name = "userfile"; 
      // $this->upload->do_upload($field_name); 

      // try to upload 
      if (! $this->upload->do_upload()) { 

       $data['error'] = $this->upload->display_errors(); 

       // load categories module to make a select list 
       $this->load->module('categories/categories'); 
       $data['options'] = $this->categories->categories_select(); 

       // load the view   
       $this->load->view('new_product_view', $data);   

      } 
      else // upload successful, insert data into table 
      { 
       // insert product data 
       $this->mdl_products->add_product($pn, $p, $cid); 

       // success msg 
       $data['msg'] = '<div class=successmsg>The product has been added!</div>'; 

       // load categories module to make a select list 
       $this->load->module('categories/categories'); 
       $data['options'] = $this->categories->categories_select(); 

       // load the view   
       $this->load->view('new_product_view', $data);   
      } 

     } 

    } 

내 아약스 (없는 파일 값 매개 변수) :

$('body').on('click', 'a.submitnewprod', function(e) { 
     e.preventDefault(); 
     // alert('code');return; 

     // get product title 
     var pt = $('#product_title').val(); 

     // get product price 
     var pp = $('#price').val(); 

     // get category id 
     var cid = $('#categories').val(); 

     // get userfile ??????? 
     var uf = $('#uploadImage').val(); 

     $.ajax({ 
      type: "POST", 
      url: site + "admin/add-new-product-ajax", 
      data: { 
       product_title:pt, 
       price: pp, 
       categories: cid 
      }, 

      beforeSend: function() { 
       $('#ajaximg img').addClass('act'); 
      }, 

      success: function(data) { 
       // $('.results').html(data); 
       $('#ajax').html(data); 
      }, 

      complete: function() { 
       $('#ajaximg img').removeClass('act'); 
      } 

     }); 


    }); 

내보기 파일에서 파일 HTML : 내가 필요로하는 일

<input id="uploadImage" type="file" name="userfile" size="20" onchange="PreviewImage();" /> 

data 매개 변수 내에서 내 아약스 호출을 전달할 수 있도록 업로드가 정상적으로 작동합니까?

Answer 1

PHP에서 $ _FILE 필드를 게시하는 방법과 관련이 없습니다. 개별 양식 필드를 잡는 대신 jQuery의 serialize 함수를 사용하여 게시물을 multipart/form-data으로 선언하십시오. 이렇게 이것을 달성하는 방법에 대한 많은 예제가 있지만 이렇게 보일 것입니다 ...

 var myData = $('#your_form').serialize(); 
     $.ajax({ 
      type: "POST", 
      contentType:attr("enctype", "multipart/form-data"), 
      url: " URL Goes Here ", 
      data: myData 
      ...