CodeIgniter - Ajax文件上傳 - 不上傳文件

Question

我有一個窗體內的引導模態窗口，其中我上傳一些文件。

這是我的腳本

<?php 

/** 
* Handle the file uploading for the article 
*/ 
public function upload_ajax() { 
    $this->output->enable_profiler(false); 

    // check if the article has been created 
    if (!$this->input->post('post_id')) { 
     // do something here .. 
    } else { 
     // set upload configs 
     $dir = FCPATH . '/posts'; 
     $config = array(
      'upload_path' => $dir, 
      'allowed_types' => 'gif|jpg|png', 
      'max_width' => '1024', 
      'max_height' => '768', 
     ); 
     $this->load->library('upload', $config); 

     // try to upload the file 
     if (!$this->upload->do_upload('userfile')) { 
      $response = array(
       'status' => '400', 
       'message' => $this->upload->display_errors(), 
      ); 
     } else { 
      $data = $this->upload->data(); 
      $response = array(
       'status' => '200', 
       'message' => '<p>The image uploaded successfully</p>', 
      ); 
     } 
    } 

    $this->output->set_content_type('application/json', 'utf-8') 
     ->set_output(json_encode($response, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES))->_display(); 
    exit(); 
} 

的JavaScript

$('#btn-upload').on('click', function (event) { 
    event.preventDefault(); 

    $.ajax({ 
    url : url, // the value from the form action attribute 
    type : 'post', 
    data : { 
     'post_id' : $('[name="postID"]').val(), 
     'userfile' : $('[name="userfile"]').val(), 
     'name' : $('[name="userfile"]').attr('name'), 
    }, 
    dataType : 'json', 
    success : function(response) { 
     $('#upload-results').removeClass('alert alert-success alert-danger').html(''); 

     if (response.status == 200) { 
     $('.upload-form').hide(); 
     $('#upload-results').addClass('alert alert-success').html(response.message); 
     } 

     if (response.status == 400) { 
     $('.upload-form').show(); 
     $('#upload-results').addClass('alert alert-danger').html(response.message); 
     } 
    }, 
    }); 
}); 

和視圖

<div class="modal-body"> 
    <div id="upload-results"></div> 

    <?php echo form_open_multipart('posts/upload_ajax', array('class' => 'form-horizontal upload-form')); ?> 

    <input type="hidden" name="postID"/> 

    <div class="form-group"> 
     <label class="col-sm-3 control-label">Image Upload</label> 
     <div class="col-sm-5"> 
      <div data-provides="fileinput" class="fileinput fileinput-new"> 
       <input type="hidden"> 

       <div data-trigger="fileinput" style="width: 200px; height: 150px;" class="fileinput-new thumbnail"> 
        <img src="<?php echo base_url('img/default.jpg'); ?>"> 
       </div> 
       <div style="max-width: 200px; max-height: 150px; line-height: 6px;" class="fileinput-preview fileinput-exists thumbnail"></div> 
       <div> 
        <span class="btn btn-white btn-file"> 
         <span class="fileinput-new">Select image</span> 
         <span class="fileinput-exists">Change</span> 
         <input type="file" accept="image/*" name="userfile"/> 
        </span> 
        <a data-dismiss="fileinput" class="btn btn-orange fileinput-exists" href="#">Remove</a> 
       </div> 
      </div> 
     </div> 
    </div> 
    <?php echo form_close(); ?> 
</div><!-- /.modal-body --> 

的問題是，即使我選擇了一個形象，我總是得到來自上載庫的驗證錯誤"You did not select a file to upload"。然而在螢火蟲我可以看到3個變量，我用Ajax請求

'post_id' : $('[name="postID"]').val(), // shows e.g. 12 
'userfile' : $('[name="userfile"]').val(), // shows e.g. my-image.jpg 
'name' : $('[name="userfile"]').attr('name'), // shows userfile 

發送我自己也嘗試這種

$userfile = $this->input->post('name'); 
if (!$this->upload->do_upload($userfile)) 

，但沒有運氣。我如何才能正常工作？

Answer 1

您發送我們在阿賈克斯

var formData = new FormData(this); 
$.ajax({ 
       url : url, // the value from the form action attribute 
       type : 'post', 
       data : formData 
       cache: false, 
       contentType: false, 
       processData: false, 
     dataType : 'json', 
       success : function(response) { 
        $('#upload-results').removeClass('alert alert-success alert-danger').html(''); 

        if (response.status == 200) { 
         $('.upload-form').hide(); 
         $('#upload-results').addClass('alert alert-success').html(response.message); 
        } 

        if (response.status == 400) { 
         $('.upload-form').show(); 
         $('#upload-results').addClass('alert alert-danger').html(response.message); 
        } 
       }, 
      }); 

使用formData文件在PHP端校驗值與

print_r($_POST); 
print_r($_FILES);