如何使用ajax在codeigniter中上传图片

<form id="uploadForm" action="#" method="post" enctype="multipart/form-data">
  <input type="file" name="userfile" id="userfile">
  <input type="submit" value="Upload" id="uploadBtn">
</form>
<div id="message"></div>

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Upload extends CI_Controller {
  
  public function __construct() {
    parent::__construct();
    $this->load->helper(array('form', 'url'));
  }
  
  public function index() {
    $this->load->view('upload_form');
  }
  
  public function do_upload() {
    $config['upload_path'] = './uploads/';
    $config['allowed_types'] = 'gif|jpg|png';
    $config['max_size'] = 2048;
    $config['encrypt_name'] = TRUE;

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

    if (!$this->upload->do_upload('userfile')) {
      $error = $this->upload->display_errors();
      echo json_encode(array('status' => 'error', 'message' => $error));
    } else {
      $data = $this->upload->data();
      echo json_encode(array('status' => 'success', 'message' => 'File uploaded successfully.', 'file' => $data['file_name']));
    }
  }
}
?>

$(document).ready(function() {
  $('#uploadForm').submit(function(e) {
    e.preventDefault();
    
    var formData = new FormData($(this)[0]);
    
    $.ajax({
      url: 'upload/do_upload',
      type: 'POST',
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false,
      success: function(response) {
        if (response.status === 'success') {
          $('#message').html(response.message);
          // 显示上传后的图片
          $('#uploadedImage').attr('src', 'uploads/' + response.file);
        } else {
          $('#message').html(response.message);
        }
      },
      error: function(xhr, status, error) {
        console.log(xhr.responseText);
      }
    });
  });
});