Jak nahrát obrázek a soubor do CodeIgniter (s příkladem)

Nahrání souboru CodeIgniter

Správa souborů je nezbytná pro většinu webových aplikací. Pokud vyvíjíte systém pro správu obsahu, budete muset být schopni nahrávat obrázky, wordové dokumenty, pdf zprávy atd. Pokud pracujete na členské stránce, možná budete muset přijmout opatření, aby lidé mohli nahrávat svůj profil snímky. Třída Nahrávání souborů CodeIgniter nám usnadňuje všechny výše uvedené činnosti.

V tomto tutoriálu se podíváme na to, jak používat knihovnu pro nahrávání souborů k načítání souborů.

Nahrávání obrázků do CodeIgniter

Nahrávání souboru do CodeIgniter má dvě hlavní části. Frontend a backend. Frontend je spravován formulářem HTML, který používá soubor typu vstupu formuláře. Na backendu knihovna pro nahrávání souborů zpracuje odeslaný vstup z formuláře a zapíše jej do adresáře pro nahrávání.

Začněme vstupním formulářem.

Vytvořte nový adresář s názvem soubory v adresáři application/views

Přidejte následující soubory do application/views/files

  • upload_form.php – toto zobrazení obsahuje HTML formulář, který má vstupní typ souboru a odešle vybraný soubor na server ke zpracování
  • upload_result.php – toto zobrazení zobrazuje výsledky nahraného obrázku včetně odkazu, na který můžeme kliknout a výsledky zobrazit.


Přidejte následující kód do 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>

TADY,

  • if (isset($error)){…} zkontroluje, zda byla nastavena chybová proměnná. Pokud je výsledek pravdivý, pak se uživateli zobrazí chyba vrácená nahrávací knihovnou.
  • typ souboru umožňuje uživateli přejít do svého počítače a vybrat soubor pro nahrání.

Přidejte následující kód do 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>

TADY,

  • používá pomocníka kotvy k vytvoření odkazu na nový nahraný soubor v adresáři obrázků. Název je načten z metadat obrázku, která jsou předána zobrazení, když byl soubor úspěšně nahrán.

Pojďme nyní vytvořit ovladač, který bude reagovat na naše nahrání obrázku

Přidejte nový soubor ImageUploadController.php do aplikace/řadiče

Přidejte následující kód do 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);
        }
    }

}

TADY,

  • třída ImageUploadController rozšiřuje CI_Controller {…} definuje naši třídu řadiče a rozšiřuje základní řadič CI_Controller
  • veřejná funkce __construct() {…} inicializuje metodu nadřazeného konstruktoru a načte pomocné adresy URL a formuláře
  • public function index() {…} definuje metodu indexu, která se používá k zobrazení formuláře pro nahrání obrázku
  • public function store() {…} definuje metodu, která nahraje obrázek a uloží jej na webový aplikační server.
    • $config['upload_path'] = './images/'; nastaví adresář, kam se mají obrázky nahrát
    • $config['allowed_types'] = 'gif|jpg|png'; definuje přijatelné přípony souborů. To je důležité z bezpečnostních důvodů. Povolené typy zajišťují, že budou nahrány pouze obrázky a že nebudou nahrány jiné typy souborů, jako je php, protože mají potenciál ohrozit server.
    • $config['max_size'] = 2000; nastavit maximální velikost souboru v kilobajtech. V našem příkladu je maximální soubor, který lze nahrát, 2,000 2 kb, téměř 2,000 MB. Pokud se uživatel pokusí nahrát soubor větší než XNUMX XNUMX kb, nahrání obrázku se nezdaří a knihovna vrátí chybovou zprávu.
    • $config['max_width'] = 1500; nastavuje maximální šířku obrázku, která je v našem případě 1,500 XNUMX px. Jakákoli větší šířka vede k chybě
    • $config['max_height'] = 1500; definuje maximální přijatelnou výšku.
    • $this->load->library('upload', $config); načte knihovnu pro nahrávání a inicializuje ji pomocí pole $config, které jsme definovali výše.
    • pokud se (!$this->upload->do_upload('profile_image')) {…} pokusí nahrát odeslaný obrázek, který se v našem případě jmenuje obrázek_profilu
    • $error = array('error' => $this->upload->display_errors()); nastaví chybovou zprávu, pokud se nahrávání nezdaří
    • $this->load->view('files/upload_form', $error); načte formulář pro nahrání souboru a zobrazí chybovou zprávu vrácenou z knihovny pro nahrávání
    • $data = array('image_metadata' => $this->upload->data()); nastaví metadata obrázku, pokud bylo nahrání úspěšné
    • $this->load->view('files/upload_result', $data); úspěšně načte nahraný pohled a předá metadata nahraného souboru.

To je vše pro ovladač. Nyní vytvoříme adresář, do kterého se budou nahrávat naše obrázky. Vytvořte nový adresář „images“ v kořenovém adresáři vaší aplikace

Nakonec do našeho souboru routes.php přidáme dvě trasy, které zobrazí formulář a zobrazí výsledky

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

TADY,

  • $route['upload-image'] = 'imageuploadcontroller'; definuje URL upload-image, který volá metodu indexu ImageUploadController
  • $route['store-image'] = 'imageuploadcontroller/store'; definuje obrázek úložiště URL, který přijímá vybraný uživatelský soubor a odešle jej na server.

Testování aplikace

Spustíme vestavěný PHP server

Otevřete terminál/příkazový řádek a přejděte do kořenového adresáře vaší aplikace. V mém případě je root umístěn na jednotce C:\Sites\ci-app

cd C:\Sites\ci-app

spusťte server pomocí následujícího příkazu

php -S localhost:3000

Načtěte do webového prohlížeče následující URL: http://localhost:3000/upload-image

budete moci vidět následující výsledky

Nahrávání obrázků do CodeIgniter

Klikněte na vybrat soubor

Měli byste vidět dialogové okno podobné následujícímu

Nahrávání obrázků do CodeIgniter

Vyberte požadovaný obrázek a klikněte na otevřít

Nahrávání obrázků do CodeIgniter

Vybraný název souboru se zobrazí při nahrání formuláře, jak je znázorněno na obrázku výše. Klikněte na tlačítko nahrát obrázek

Za předpokladu, že vše půjde dobře, získáte následující výsledky

Nahrávání obrázků do CodeIgniter

Klikněte na Zobrazit můj obrázek! Odkaz

Měli byste vidět obrázek, který jste nahráli. Výsledky budou podobné následujícím

Nahrávání obrázků do CodeIgniter

Všimněte si, že název nahraného obrázku se zobrazí v adrese URL. Název obrázku jsme získali z nahraných metadat obrázku

Poznámka: Proces nahrávání souboru zůstává stejný pro ostatní typy souborů