Codeigniter輸入文件返回空表格與jQuery ajax

Question

我試圖上傳一個文件到服務器l框架CodeIgniter，jQuery ajax，但我提交表單返回空圖像字段，並且圖片不起來。

我很感謝您的幫助。

下面的代碼

控制器：

public function do_upload() 
{ 
    //Check if isset request AJAX 
    if(! $this->input->is_ajax_request()) { 
     show_404(); 
    } 

    //Config upload files 
    $config = array(
        'upload_path' => './assets/files/', 
        'allowed_types' => 'jpg|jpeg|png|gif', 
        'max_size'  => '2048 ', 
        'overwrite'  => TRUE, 
        'remove_spaces' => TRUE 
        ); 

    //Load library 
    $this->load->library('upload', $config); 

    if (! $this->upload->do_upload('imagen')) { 

     $error = array(
         'respuesta' => FALSE, 
         'message' => $this->upload->display_errors() 
        ); 
     echo json_encode($error); 
    } 
    else{ 
     $config = array(
         'respuesta' => TRUE, 
         'message' => 'Completado!' 
         ); 
     echo json_encode($config); 
    } 


} 

查看：

<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 col_right"> 
<div class="ctn"> 
    <h3>Subir contenido al servidor</h3> 

    <form action="" method="POST" id="form_file" name="form_file" enctype="multipart/form-data"> 

     <div class="form-group"> 
      <input type="file" name="imagen" id="imagen"> 
     </div> 

     <button type="button" id="btn_form" class="btn btn-primary">Subir imagen</button> 
    </form> 

</div><!--End ctn--> 

腳本的Jquery的Ajax：

$(function() { 

    $('#btn_form').on('click', function(event) { 

    //Serialize form 
    var form_serialize = $("#form_file").serialize(); 
    alert(form_serialize); 

    $.ajax({ 
     beforeSend: function() { 

     }, 
     cache: false, 
     type: "POST", 
     dataType: "json", 
     url: "/file/do_upload/", 
     data: form_serialize + "&id=" + Math.random(), 
     success: function (response) { 

      if (response.respuesta == true) { 
       alert(response.message); 
      } 

      if (response.respuesta == false) { 
       alert(response.message); 
      } 

     }, 
     error: function() { 
      alert('SYSTEM ERROR, TRY LATER AGAIN'); 
     } 
    }); 
    }); 

}）;

Answer 1

你有按鈕式做這樣

變化submit ,,

變化jQuery函數

$(function() { 
      $('#form_file').on('submit', function (e) { 
       e.preventDefault(); 
       var formData = new FormData(this); 
       $.ajax({ 
//     cache: false, 
        type: "POST", 
        // dataType: "json", 
        processData: false, 
        contentType: false, 
        url: "/file/do_upload/", 
        data: formData, 
        success: function (response) { 
         if (response.respuesta == true) { 
          alert(response.message); 
         } 
         if (response.respuesta == false) { 
          alert(response.message); 
         } 
        }, 
        error: function() { 
         alert('SYSTEM ERROR, TRY LATER AGAIN'); 
        } 
       }); 
      }); 
     });