AJAX загрузка файлов на сервер

Различные скрипты

Создадим папку там, где у нас установлен CodeIgniter, папка будет именоватся uploads, так же выставим ей права доступа 777. Затем создадим отображение в папке с видами, назвав файл upload.php:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AJAX загрузка файлов на сервер.</title>
    <script src="jquery.js"></script>
    <script src="jquery.ocupload-1.1.2.packed.js"></script>
    <script language="javascript">
    $(document).ready(function() {
      $('#upload').upload({
        name: 'userfile',
        method: 'post',
        enctype: 'multipart/form-data',
        action: 'upload/do_upload',
        onSubmit: function() {
          $('#result').text('Uploading...');
        },
        onComplete: function(data) {
          $('#result').text(data);
        }
    });
    });
    </script>
  </head>
  <body>
  <a id="upload" style="font-family: Verdana; color: #000" href="#">Выберите файл</a>
  <span id="result"></span>
  </body>
</html>

jQuery и One Click Upload, должны быть уже на вашем сервере. Файл отображения должен загружатся из основного контролёра например так:

function index() {
    $this->load->view('upload');
  }

Имя основного контролёра задаётся в конфиге routes.php, в строке $route['default_controller'].
После этого в папке с контролёрами создадим файл c таким же именем как и в папке с отображениями – upload.php:

<?php
class Upload extends Controller {
  
  function __construct() {
    parent::Controller();
    $this->load->helper(array('form', 'url'));
  }
  
  function index() {}

  function do_upload() {
    $config['upload_path'] = './uploads/';
    $config['allowed_types'] = 'gif|jpg|png';
    $config['max_size']  = '100';
    $config['max_width']  = '1280';
    $config['max_height']  = '1024';
    $config['remove_spaces']  = TRUE;
    $this->load->library('upload', $config);
    if (!$this->upload->do_upload()) {
      echo $this->upload->display_errors();
    }else {
      $data = $this->upload->data();
      echo "File name: $data[file_name]. File size: $data[file_size]";
    }
  }
  
}
?>

Код обоих фалов достаточно прост, о дополнительних настройках плагина и библиотеки, читайте на соответствующих ресурсах. Отмечу лишь, что в jQuery скрипте:

$(document).ready(function() {
  $('#upload').upload({
    name: 'userfile',
    method: 'post',
    enctype: 'multipart/form-data',
    action: 'upload/do_upload',
    onSubmit: function() {
      $('#result').text('Uploading...');
    },
    onComplete: function(data) {
      $('#result').text(data);
    }
  });
});

значение поля «name» можно установить своё, например «some_field», передав её в контролёре в качестве параметра функции do_upload:

$this->upload->do_upload('some_field')