Как загрузить изображение и файл в CodeIgniter (с примером)

Автор: Фиона Браун Фиона Браун
Hours обновлено

Загрузка файла CodeIgniter

Управление файлами необходимо для большинства веб-приложений. Если вы разрабатываете систему управления контентом, вам потребуется возможность загружать изображения, текстовые документы, отчеты в формате PDF и т. д. Если вы работаете над сайтом для участников, вам может потребоваться предусмотреть возможность загрузки людьми своего профиля. изображений. Класс загрузки файлов CodeIgniter позволяет нам легко сделать все вышеперечисленное.

В этом уроке мы рассмотрим, как использовать библиотеку загрузки файлов для загрузки файлов.

Загрузка изображений в CodeIgniter

Загрузка файла в CodeIgniter имеет две основные части. Фронтенд и бэкенд. Интерфейс обрабатывается HTML-формой, которая использует файл типа ввода формы. На серверной стороне библиотека загрузки файлов обрабатывает введенные данные из формы и записывает их в каталог загрузки.

Начнем с формы ввода.

Создайте новый каталог с именем files в каталоге application/views.

Добавьте следующие файлы в папку application/views/files.

  • upload_form.php – это представление содержит HTML-форму, которая имеет тип входного файла и отправляет выбранный файл на сервер для обработки.
  • upload_result.php – в этом представлении отображаются результаты загруженного изображения, включая ссылку, по которой мы можем щелкнуть, чтобы просмотреть результаты.


Добавьте следующий код в upload_form.php

<!DOCTYPE html>
<html>
<head>
    <title>CodeIgniter Image Upload</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div>
        <h3>Select an image from your computer and upload it to the cloud</h3>
        <?php
                if (isset($error)){
                    echo $error;
                }
            ?>
            <form method="post" action="<?=base_url('store-image')?>" enctype="multipart/form-data">
                <input type="file" id="profile_image" name="profile_image" size="33" />
                <input type="submit" value="Upload Image" />
            </form>
    </div>
</body>
</html>

ВОТ,

  • if (isset($error)){…} проверяет, установлена ​​ли переменная ошибки. Если результат верен, пользователю отображается ошибка, возвращаемая библиотекой загрузки.
  • Тип файла позволяет пользователю перейти на свой компьютер и выбрать файл для загрузки.

Добавьте следующий код в upload_result.php

<!DOCTYPE html>
<html>
<head>
    <title>Image Upload Results</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div>
        <h3>Congratulations, the image has successfully been uploaded</h3>
        <p>Click here to view the image you just uploaded
            <?=anchor('images/'.$image_metadata['file_name'], 'View My Image!')?>
        </p>

        <p>
            <?php echo anchor('upload-image', 'Go back to Image Upload'); ?>
        </p>
    </div>
</body>
</html>

ВОТ,

  • использует помощник привязки для создания ссылки на новый загруженный файл в каталоге изображений. Имя извлекается из метаданных изображения, которые передаются в представление после успешной загрузки файла.

Давайте теперь создадим контроллер, который будет реагировать на загрузку нашего изображения.

Добавьте новый файл ImageUploadController.php в application/controllers.

Добавьте следующий код в ImageUploadController.php

<?php

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

class ImageUploadController extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->helper('url', 'form');
    }

    public function index() {
        $this->load->view('files/upload_form');
    }

    public function store() {
        $config['upload_path'] = './images/';
        $config['allowed_types'] = 'gif|jpg|png';
        $config['max_size'] = 2000;
        $config['max_width'] = 1500;
        $config['max_height'] = 1500;

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

        if (!$this->upload->do_upload('profile_image')) {
            $error = array('error' => $this->upload->display_errors());

            $this->load->view('files/upload_form', $error);
        } else {
            $data = array('image_metadata' => $this->upload->data());

            $this->load->view('files/upload_result', $data);
        }
    }

}

ВОТ,

  • класс ImageUploadController расширяет CI_Controller {…} определяет наш класс контроллера и расширяет базовый контроллер CI_Controller
  • публичная функция __construct() {…} инициализирует метод родительского конструктора и загружает URL-адрес и помощники формы
  • публичная функция index() {…} определяет метод индекса, который используется для отображения формы загрузки изображения
  • public function store() {…} определяет метод, который будет загружать изображение и сохранять его на сервере веб-приложений.
    • $config['upload_path'] = './images/'; устанавливает каталог, в который должны быть загружены изображения
    • $config['allowed_types'] = 'gif|jpg|png'; определяет допустимые расширения файлов. Это важно из соображений безопасности. Разрешенные типы гарантируют, что загружаются только изображения, а другие типы файлов, такие как php, не могут быть загружены, поскольку они могут поставить под угрозу сервер.
    • $config['max_size'] = 2000; установите максимальный размер файла в килобайтах. В нашем примере максимальный размер файла, который можно загрузить, составляет 2,000 КБ (около 2 МБ). Если пользователь попытается загрузить файл размером более 2,000 КБ, изображение не загрузится, и библиотека вернет сообщение об ошибке.
    • $config['max_width'] = 1500; устанавливает максимальную ширину изображения, которая в нашем случае составляет 1,500 пикселей. Любая ширина, превышающая эту, приводит к ошибке.
    • $config['max_height'] = 1500; определяет максимально допустимую высоту.
    • $this->load->library('upload', $config); загружает библиотеку загрузки и инициализирует ее с помощью массива $config, который мы определили выше.
    • if (!$this->upload->do_upload('profile_image')) {…} пытается загрузить отправленное изображение, которое в нашем случае называется Profile_image
    • $error = array('error' => $this->upload->display_errors()); устанавливает сообщение об ошибке, если загрузка не удалась
    • $this->load->view('files/upload_form', $error); загружает форму загрузки файла и отображает сообщение об ошибке, возвращаемое из библиотеки загрузки
    • $data = array('image_metadata' => $this->upload->data()); устанавливает метаданные изображения, если загрузка прошла успешно
    • $this->load->view('files/upload_result', $data); загружает представление успешно загруженного файла и передает метаданные загруженного файла.

Вот и все, что касается контроллера. Давайте теперь создадим каталог, в который будут загружены наши изображения. Создайте новый каталог images в корневом каталоге вашего приложения.

Наконец, мы добавим два маршрута в наш файл Routes.php, которые будут отображать форму и результаты.

Open application/config/routes.php
Add the following routes
$route['upload-image'] = 'imageuploadcontroller';
$route['store-image'] = 'imageuploadcontroller/store';

ВОТ,

  • $route['upload-image'] = 'imageuploadcontroller'; определяет URL-адрес загрузки изображения, который вызывает индексный метод ImageUploadController
  • $route['store-image'] = 'imageuploadcontroller/store'; определяет URL-адрес хранилища-изображения, которое принимает выбранный пользовательский файл и загружает его на сервер.

Тестирование приложения

Запустим встроенный PHP-сервер

Откройте терминал/командную строку и перейдите в корень вашего приложения. В моем случае корень находится на диске C:\Sites\ci-app.

cd C:\Sites\ci-app

запустите сервер, используя следующую команду

php -S localhost:3000

Загрузите следующий URL-адрес в свой веб-браузер: http://localhost:3000/upload-image

вы сможете увидеть следующие результаты

Загрузка изображений в CodeIgniter

Нажмите выбрать файл

Вы должны увидеть диалоговое окно, подобное следующему.

Загрузка изображений в CodeIgniter

Выберите желаемое изображение и нажмите «Открыть».

Загрузка изображений в CodeIgniter

Выбранное имя файла отобразится в форме загрузки, как показано на изображении выше. Нажмите кнопку загрузить изображение

Вы получите следующие результаты, если все пойдет хорошо

Загрузка изображений в CodeIgniter

Нажмите «Просмотреть мое изображение!» Связь

Вы должны увидеть изображение, которое вы загрузили. Результаты будут аналогичны следующим

Загрузка изображений в CodeIgniter

Обратите внимание, что имя загруженного изображения отображается в URL-адресе. Мы получили имя изображения из метаданных загруженного изображения.

СТАТЬИ ПО ТЕМЕ

Примечание. Процесс загрузки файлов остается таким же для других типов файлов.

Подведем итог этой публикации следующим образом: