ajaxとformdataでcodeigniterを使用して画像をアップロード

Question

私はajaxでcodeigniterを使用して画像をアップロードしたいと思います。私はコントローラの領域にリダイレクトするイメージをアップロードするときに値がデータベースに挿入されていないajaxレスポンスも来ていない私の問題を解決することができます....事前におかげ...

これは私の表示領域です。

<form action="<?php echo site_url("Admin_Creator/do_upload")?>" enctype="multipart/form-data" accept-charset="utf-8" name="formname" id="frm_imageuupload" method="post"> 
       <div class="form-group"> 
       <label for="menu">Select Menu</label> 
        <select class="form-control" id="selectmenuid"> 
        <option value="">-- Select Menu --</option> 
        <?php foreach($showData as $show):?> 
         <option value="<?php echo $show->menu_id?>"><?php echo $show->menu_name?></option> 
        <?php endforeach;?> 
        </select> 
       </div> 
       <div class="form-group"> 
       <label for="menu">Select Sub Menu</label> 
        <select class="form-control" id="selectsubmenu"> 
         <option>--Select Sub Menu--</option> 
        </select> 
       </div> 
       <div class="form-group"> 
        <label for="imagetitle">Image Title</label> 
        <input type="text" class="form-control" name="imagetitle" id="imagetitle" placeholder="Enter Image Title" required="required"> 
       </div> 
       <div class="control-group form-group"> 
         <div class="controls"> 
          <label>Upload Photo:</label> 
          <input name="file" type="file" id="image_file" required> 
          <p class="help-block"></p> 
         </div> 
       </div> 
       <button type="submit" class="btn btn-primary" id="submit">Submit</button> 
      </form> 

これは、これは私のコントローラのコーディングで

$('#submit').on('click',function(){ 
     var inputFile=$('input[name=file]'); 
     var fileToUpload=inputFile[0].files[0]; 
     var other_data = $('#frm_imageuupload').serializeArray(); 
     var formdata=new FormData(); 
     formdata.append(fileToUpload); 
     formdata.append(other_data); 
     //now upload the file using ajax 
     $.ajax({ 
      url:"<?php echo base_url('Admin_Creator/do_upload') ?>", 
      type:"post", 
      data:formdata, 
      processData:false, 
      contentType:false, 
       success: function(data){ 
      if (data== 'true'){ 
       window.location.reload(); 
      } 
      else{ 
       alert("Pls Try Again"); 
      } 
      } 
     }); 

をコーディング私のAjaxのです...

public function do_upload(){ 
     $config['upload_path']="./upload"; 
     $config['allowed_types']='gif|jpg|png'; 
     $this->load->library('upload',$config); 
     if($this->upload->do_upload()){ 
     $data = array('upload_data' => $this->upload->data()); 
     $data1 = array(
     'menu_id' => $this->input->post('selectmenuid'), 
     'submenu_id' => $this->input->post('selectsubmenu'), 
     'imagetitle' => $this->input->post('imagetitle'), 
     'imgpath' => $data['upload_data']['file_name'] 
     ); 
     $result= $this->Admin_model->save_imagepath($data1); 
     if ($result == TRUE) { 
      echo "true"; 
     } 
     } 

    } 

これは、これは簡単です

public function save_imagepath($data1) 
    { 
     $this->db->insert('images', $data1); 
     return $this->db->insert_id(); 
    } 

Answer 1

を提出止めるべきアヤックス
あるこのお試しください。

$('#submit').submit(function(e){ 
    e.preventDefault(); 
     $.ajax({ 
      url:'Your path', 
      type:"post", 
      data:new FormData(this), 
      processData:false, 
      contentType:false, 
      cache:false, 
      async:false, 
       success: function(data){ 
        alert(data); 
      } 
     }); 
    }); 

ただ、AJAXにURLを設定し、それが完璧に動作します - それは
HTMLフォーム -

<form enctype="multipart/form-data" id="submit"> 
       <div class="form-group"> 
       <label for="menu">Select Menu</label> 
        <select class="form-control" name="selectmenuid" id="selectmenuid"> 
        <option value="">-- Select Menu --</option> 
        <?php foreach($showData as $show):?> 
         <option value="<?php echo $show->menu_id?>"><?php echo $show->menu_name?></option> 
        <?php endforeach;?> 
        </select> 
       </div> 
       <div class="form-group"> 
       <label for="menu">Select Sub Menu</label> 
        <select class="form-control" name="selectsubmenu" id="selectsubmenu"> 
         <option>--Select Sub Menu--</option> 
        </select> 
       </div> 
       <div class="form-group"> 
        <label for="imagetitle">Image Title</label> 
        <input type="text" class="form-control" name="imagetitle" id="imagetitle" placeholder="Enter Image Title" required="required"> 
       </div> 
       <div class="control-group form-group"> 
         <div class="controls"> 
          <label>Upload Photo:</label> 
          <input name="file" type="file" id="image_file" required> 
          <p class="help-block"></p> 
         </div> 
       </div> 
       <button type="submit" class="btn btn-primary" id="sub">Submit</button> 
      </form> 

アヤックスworking-です。
コントローラ機能 -

public function do_upload(){ 
     $config['upload_path']="./upload"; 
     $config['allowed_types']='gif|jpg|png'; 
     $this->load->library('upload',$config); 
     if($this->upload->do_upload("file")){ 
     $data = array('upload_data' => $this->upload->data()); 
     $data1 = array(
     'menu_id' => $this->input->post('selectmenuid'), 
     'submenu_id' => $this->input->post('selectsubmenu'), 
     'imagetitle' => $this->input->post('imagetitle'), 
     'imgpath' => $data['upload_data']['file_name'] 
     ); 
     $result= $this->Admin_model->save_imagepath($data1); 
     if ($result == TRUE) { 
      echo "true"; 
     } 
     } 

    } 

Answer 2

をコーディング私のモデルです。
問題は、フォームが最初

$('form').on('submit',function(e){//bind event on form submit. 
    e.preventDefault();//stop submit 
    .........   //your other codes