使用Codeigniter通过JQuery AJAX一起发送FormData和上传文件？

Question

我使用codiegniter通过Ajax上传文件，但我也想从数据发送并获取它在控制器上并对其执行。

文件上传正在工作，但无法获取其他表单数据。

我也序列化表单数据，但没有奏效。

HTML代码：

<form action="<?php echo site_url("admin_panel/upload_project_image") ?>" id="form-upload"> 

<input type="hidden" name="project_id" id="project_id" value="<?=$project_details->ID;?>"> 
       <div class="fileinput fileinput-new input-group" data-provides="fileinput"> 
       <div class="form-control" data-trigger="fileinput" style="margin:3px"> <i class="glyphicon glyphicon-file fileinput-exists"></i> 
        <span class="fileinput-filename"></span> 
       </div> 
       <span class="input-group-addon btn btn-default btn-file" style="margin:3px"> 
        <span class="fileinput-new"> <i class="glyphicon glyphicon-paperclip"></i> 
        Select file 
        </span> 
        <span class="fileinput-exists"> 
        <i class="glyphicon glyphicon-repeat"></i> 
        Change 
        </span> 
        <input type="file" name="file[]" multiple id="file"></span> 
       <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput" style="margin:3px"> 
        <i class="glyphicon glyphicon-remove"></i> 
        Remove 
       </a> 
       <a href="#" id="upload-btn" class="input-group-addon btn btn-success fileinput-exists" style="margin:3px"> 
        <i class="glyphicon glyphicon-open"></i> 
        Upload 
       </a> 
       </div> 
      </form> 

jQuery代码：

$('#upload-btn').on('click', function(event) { 
     var filesToUpload = inputFile[0].files; 
     var projectID = $('#project_id').val(); 
     if (filesToUpload.length > 0) { 
      var formData = new FormData(); 

      for (var i = 0; i < filesToUpload.length; i++) { 
       var file = filesToUpload[i]; 

       formData.append("file[]", file, file.name);    
      } 
      var other_data = $('#form-upload').serializeArray(); 
      $.each(other_data,function(key,input){ 
       formData.append(input.name,input.value); 
      }); 
      $.ajax({ 
       url: uploadURI, 
       type: 'post', 
       data: formData, 
       processData: false, 
       contentType: false, 
       success: function(data) { 
        console.log(data); 
        listFilesOnServer(); 
       }, 

控制器代码：

function upload_project_image() { 
     if (!empty($_FILES)) { 
      $this->load->library('upload'); 
      $config['upload_path'] = "./assets/uploads"; 
      $config['allowed_types'] = 'gif|jpg|png|mp4|ogv|zip'; 
      $this->upload->initialize($config); 
      $this->load->library('upload', $config); 
      if (!is_dir($config['upload_path'])) { 
       mkdir($config['upload_path'], 0777, true); 
      } 

      $files = $_FILES; 
      $project_id = $_POST['projectID']; 
      echo $project_id . "--ID"; 
      $number_of_files = count($_FILES['file']['name']); 
      $errors = 0; 

Answer 1

我觉得没有必要单独序列化的形式，如果你使用FORMDATA然后尝试以下内容 -

// this is what i am using to upload file and forms data with in the form 
$(document).on('submit','#form-upload',function(){ 
     var formData=new FormData($('#form-upload')[0]); 
     $object=$(this); 
     $.ajax({ 
      url  : $($object).attr('action'), 
      type : 'post', 
      data : formData, 
      processData:false, 
      contentType:false, 
      success : function(responseText) 
         { 
          alert('uploaded successfully'); 
          // do what ever you want with responseText 
         }, 
      error : function(e) 
         { 
          alert('hello from here'); 
         } 
     }); 
    });