Як завантажити зображення та файл у CodeIgniter (з прикладом)

Завантаження файлу CodeIgniter

Керування файлами має важливе значення для більшості веб-програм. Якщо ви розробляєте систему керування вмістом, вам потрібно буде мати можливість завантажувати зображення, документи Word, звіти у форматі PDF тощо. Якщо ви працюєте на веб-сайті для членства, можливо, вам знадобиться передбачити, щоб люди могли завантажувати свої профілі зображення. Клас завантаження файлів CodeIgniter полегшує нам виконання всього вищезазначеного.

У цьому посібнику ми розглянемо, як використовувати бібліотеку для завантаження файлів.

Завантаження зображень у CodeIgniter

Завантаження файлу в CodeIgniter має дві основні частини. Інтерфейс і бекенд. Інтерфейс обробляється формою HTML, яка використовує файл типу введення форми. На сервері бібліотека завантаження файлів обробляє надіслані вхідні дані з форми та записує їх у каталог завантаження.

Почнемо з форми введення.

Створіть новий каталог під назвою files у каталозі application/views

Додайте наступні файли в додаток/перегляди/файли

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 у додаток/контролери

Додайте наступний код до 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);
        }
    }

}

ТУТ,

class ImageUploadController extends CI_Controller {…} визначає наш клас контролера та розширює базовий контролер CI_Controller
публічна функція __construct() {…} ініціалізує метод батьківського конструктора та завантажує URL-адресу та помічники форми
public function 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 upload-image, який викликає метод індексу ImageUploadController
$route['store-image'] = 'imageuploadcontroller/store'; визначає URL-адресу store-image, яка приймає вибраний файл користувача та завантажує його на сервер.

Тестування програми

Давайте запустимо вбудований сервер PHP

Відкрийте термінал/командний рядок і перейдіть до кореневої папки програми. У моєму випадку корінь знаходиться на диску C:\Sites\ci-app

cd C:\Sites\ci-app

запустіть сервер за допомогою наступної команди

php -S localhost:3000

Завантажте наступну URL-адресу у свій веб-переглядач: http://localhost:3000/upload-image

ви зможете побачити наступні результати

Натисніть вибрати файл

Ви повинні побачити діалогове вікно, схоже на наведене нижче

Виберіть потрібне зображення та натисніть «Відкрити».

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

Ви отримаєте такі результати, якщо все піде добре

Натисніть Переглянути моє зображення! Посилання

Ви повинні побачити зображення, яке ви завантажили. Результати будуть подібні до наступного

Зверніть увагу, що назва завантаженого зображення відображається в URL-адресі. Ми отримали назву зображення із завантажених метаданих зображення

Примітка. Процес завантаження файлів залишається незмінним для інших типів файлів

Вам може сподобатися:

Завантаження файлу CodeIgniter

Завантаження зображень у CodeIgniter

Тестування програми

СТАТТІ ПО ТЕМІ