Kujutise ja faili üleslaadimine CodeIgniteris (näitega)

CodeIgniteri faili üleslaadimine

Failihaldus on enamiku veebirakenduste jaoks hädavajalik. Kui arendate sisuhaldussüsteemi, peate saama üles laadida pilte, Wordi dokumente, pdf-aruandeid jne. Kui töötate liikmesaidil, peate võib-olla tegema sätte, et inimesed saaksid oma profiili üles laadida. pilte. CodeIgniteri failide üleslaadimise klass muudab kõigi ülalnimetatute tegemise lihtsaks.

Selles õpetuses vaatleme, kuidas kasutada failide laadimiseks failide üleslaadimise teeki.

Piltide üleslaadimine CodeIgniterisse

Faili üleslaadimine CodeIgniter on kaks põhiosa. Esiosa ja tagaosa. Esiosa haldab HTML-vorm, mis kasutab vormi sisendtüübi faili. Taustaprogrammis töötleb failide üleslaadimise teek vormilt esitatud sisendi ja kirjutab selle üleslaadimiskataloogi.

Alustame sisestusvormiga.

Looge rakenduste/vaadete kataloogis uus kataloog nimega failid

Lisage rakenduses/vaadetes/failides järgmised failid

  • upload_form.php – see vaade sisaldab HTML-vormi, millel on faili sisendtüüp ja mis saadab valitud faili töötlemiseks serverisse
  • upload_result.php – see vaade kuvab üleslaaditud pildi tulemused koos lingiga, millel saame tulemuste vaatamiseks klõpsata.


Lisage faili upload_form.php järgmine kood

<!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>

SIIN,

  • if (isset($error)){…} kontrollib, kas veamuutuja on seatud. Kui tulemus on tõene, kuvatakse kasutajale üleslaadimise teegi tagastatud viga.
  • tüüpfail võimaldab kasutajal sirvida oma arvutisse ja valida üleslaadimiseks faili.

Lisage saidile upload_result.php järgmine kood

<!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>

SIIN,

  • kasutab ankurabistajat, et luua piltide kataloogis uuele üleslaaditud failile link. Nimi leitakse pildi metaandmetest, mis edastatakse kuvale, kui fail on edukalt üles laaditud.

Loome nüüd kontrolleri, mis reageerib meie piltide üleslaadimisele

Lisage rakendusse/kontrolleritesse uus fail ImageUploadController.php

Lisage failile ImageUploadController.php järgmine kood

<?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);
        }
    }

}

SIIN,

  • klass ImageUploadController laiendab CI_Controller {…} määratleb meie kontrolleri klassi ja laiendab põhikontrollerit CI_Controller
  • avalik funktsioon __construct() {…} lähtestab vanemkonstruktori meetodi ning laadib URL-i ja vormiabilised
  • public function index() {…} määrab indeksi meetodi, mida kasutatakse pildi üleslaadimise vormi kuvamiseks
  • avalik funktsioon store() {…} määrab meetodi, mis laadib pildi üles ja salvestab selle veebirakenduse serverisse.
    • $config['upload_path'] = './images/'; määrab kataloogi, kuhu pildid üles laadida
    • $config['allowed_types'] = 'gif|jpg|png'; määrab vastuvõetavad faililaiendid. See on turvalisuse huvides oluline. Lubatud tüübid tagavad, et üles laaditakse ainult pilte ja muid failitüüpe, nagu php, ei saa üles laadida, kuna need võivad serverit kahjustada.
    • $config['max_size'] = 2000; määrake faili maksimaalne suurus kilobaitides. Meie näites on maksimaalne üleslaaditav fail 2,000 kb ja 2 MB. Kui kasutaja proovib üles laadida faili, mis on suurem kui 2,000 kb, siis pildi üleslaadimine ebaõnnestub ja teek tagastab veateate.
    • $config['max_width'] = 1500; määrab pildi maksimaalse laiuse, mis meie puhul on 1,500 px. Sellest suurem laius põhjustab tõrke
    • $config['max_height'] = 1500; määrab maksimaalse lubatud kõrguse.
    • $this->load->library('üleslaadimine', $config); laadib üleslaadimise teegi ja lähtestab selle ülal määratletud massiiviga $config.
    • if (!$this->upload->do_upload('profile_image')) {…} üritab üles laadida saadetud pilti, mis meie puhul kannab nime profile_image
    • $viga = array('error' => $see->üleslaadimine->kuva_vead()); määrab veateate, kui üleslaadimine ebaõnnestub
    • $this->load->view('failid/üleslaadimisvorm', $viga); laadib faili üleslaadimise vormi ja kuvab üleslaadimise teegist tagastatud veateate
    • $andmed = array('image_metadata' => $see->üleslaadimine->andmed()); määrab pildi metaandmed, kui üleslaadimine on õnnestunud
    • $this->load->view('failid/üleslaadimise_tulemus', $andmed); laadib edukalt üleslaaditud vaate ja edastab üleslaaditud faili metaandmed.

See on kontrolleri jaoks. Loome nüüd kataloogi, kuhu meie pildid üles laaditakse. Looge oma rakenduse juurkataloogis uus kataloog "images".

Lõpuks lisame faili routes.php kaks marsruuti, mis kuvab vormi ja kuvab tulemused

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

SIIN,

  • $route['upload-image'] = 'imageuploadcontroller'; määrab URL-i üleslaadimise pildi, mis kutsub esile ImageUploadControlleri indeksmeetodi
  • $route['store-image'] = 'imageuploadcontroller/store'; määrab URL-i poepildi, mis aktsepteerib valitud kasutajafaili ja laadib selle serverisse üles.

Rakenduse testimine

Käivitame sisseehitatud PHP-serveri

Avage terminal/käsurida ja sirvige oma rakenduse juure. Minu puhul asub juur draivi C:\Sites\ci-app

cd C:\Sites\ci-app

käivitage server järgmise käsuga

php -S localhost:3000

Laadige oma veebibrauserisse järgmine URL: http://localhost:3000/upload-image

näete järgmisi tulemusi

Piltide üleslaadimine CodeIgniterisse

Klõpsake faili valimiseks

Peaksite nägema järgmisega sarnast dialoogiakent

Piltide üleslaadimine CodeIgniterisse

Valige soovitud pilt ja klõpsake nuppu Ava

Piltide üleslaadimine CodeIgniterisse

Valitud failinimi kuvatakse vormi üleslaadimisel, nagu on näidatud ülaloleval pildil. Klõpsake pildi üleslaadimise nuppu

Eeldusel, et kõik läheb hästi, saate järgmised tulemused

Piltide üleslaadimine CodeIgniterisse

Klõpsake nuppu Vaata minu pilti! Link

Peaksite nägema üleslaaditud pilti. Tulemused on sarnased järgmistega

Piltide üleslaadimine CodeIgniterisse

Pange tähele, et üleslaaditud pildi nimi kuvatakse URL-is. Pildi nime saime üleslaaditud pildi metaandmetest

Märkus. Failide üleslaadimise protsess jääb muud tüüpi failide puhul samaks