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

по: Фиона Браун Фиона Браун
Hours Обновено

Качване на файл от CodeIgniter

Управлението на файлове е от съществено значение за повечето уеб приложения. Ако разработвате система за управление на съдържанието, тогава ще трябва да можете да качвате изображения, текстови документи, 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);
        }
    }

}

ТУК,

  • клас ImageUploadController разширява CI_Controller {…} дефинира нашия клас контролер и разширява базовия контролер CI_Controller
  • публична функция __construct() {…} инициализира метода на родителския конструктор и зарежда помощните адреси и формуляри
  • публична функция index() {…} дефинира метода на индексиране, който се използва за показване на формата за качване на изображение
  • public function store() {…} дефинира метода, който ще качи изображението и ще го съхрани на сървъра за уеб приложения.
    • $config['upload_path'] = './images/'; задава директорията, в която да се качват изображенията
    • $config['allowed_types'] = 'gif|jpg|png'; дефинира приемливите файлови разширения. Това е важно от съображения за сигурност. Разрешените типове гарантират, че се качват само изображения, а други типове файлове като php не могат да бъдат качени, защото имат потенциал да компрометират сървъра.
    • $config['max_size'] = 2000; задайте максималния размер на файла в килобайти. В нашия пример максималният файл, който може да бъде качен, е 2,000kb, близо до 2MB. Ако потребителят се опита да качи файл, по-голям от 2,000 kb, изображението няма да успее да качи и библиотеката ще върне съобщение за грешка.
    • $config['max_width'] = 1500; задава максималната ширина на изображението, която в нашия случай е 1,500 px. Всяка ширина, по-голяма от тази, води до грешка
    • $config['max_height'] = 1500; определя максимално допустимата височина.
    • $this->load->library('качване', $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

ще можете да видите следните резултати

Качване на изображения в CodeIgniter

Кликнете върху избор на файл

Трябва да можете да видите диалогов прозорец, подобен на следния

Качване на изображения в CodeIgniter

Изберете желаното изображение, след което щракнете върху отваряне

Качване на изображения в CodeIgniter

Избраното име на файл ще се покаже във формуляра за качване, както е показано на изображението по-горе. Кликнете върху бутона за качване на изображение

Ще получите следните резултати, ако приемем, че всичко върви добре

Качване на изображения в CodeIgniter

Кликнете върху Преглед на моето изображение! Връзка

Трябва да можете да видите изображението, което сте качили. Резултатите ще бъдат подобни на следните

Качване на изображения в CodeIgniter

Забележете, че името на качено изображение се показва в URL адреса. Получихме името на изображението от качените метаданни на изображението

СВЪРЗАНИ СТАТИИ

Забележка: Процесът на качване на файлове остава същият за други типове файлове