Kuvan ja tiedoston lataaminen CodeIgniteriin (esimerkillä)

CodeIgniter-tiedoston lataus

Tiedostonhallinta on välttämätöntä useimmille verkkosovelluksille. Jos olet kehittämässä sisällönhallintajärjestelmää, sinun on voitava ladata kuvia, Word-asiakirjoja, pdf-raportteja jne. Jos työskentelet jäsensivustolla, saatat joutua huolehtimaan siitä, että ihmiset voivat ladata profiilinsa kuvia. CodeIgniterin File Uploading -luokan ansiosta meidän on helppo tehdä kaikki edellä mainitut.

Tässä opetusohjelmassa tarkastellaan, kuinka tiedostojen latauskirjastoa käytetään tiedostojen lataamiseen.

Kuvien lataaminen CodeIgniteriin

Tiedoston lataus sisään CodeIgniter on kaksi pääosaa. Etuosa ja taustaosa. Käyttöliittymää käsittelee HTML-lomake, joka käyttää lomakkeen syöttötyyppiä. Taustalla tiedostojen latauskirjasto käsittelee lomakkeesta lähetetyn syötteen ja kirjoittaa sen lataushakemistoon.

Aloitetaan syöttölomakkeella.

Luo uusi hakemisto nimeltä tiedostot sovellus-/näkymähakemistoon

Lisää seuraavat tiedostot sovellukseen/näkymiin/tiedostoihin

upload_form.php – tämä näkymä sisältää HTML-lomakkeen, jossa on syötetyyppinen tiedosto ja joka lähettää valitun tiedoston palvelimelle käsittelyä varten
upload_result.php – tämä näkymä näyttää ladatun kuvan tulokset sekä linkin, jota napsauttamalla voimme tarkastella tuloksia.

Lisää seuraava koodi tiedostoon 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>

TÄSSÄ,

if (isset($error)){…} tarkistaa, onko virhemuuttuja asetettu. Jos tulos on tosi, latauskirjaston palauttama virhe näytetään käyttäjälle.
tyyppitiedoston avulla käyttäjä voi selata tietokonettaan ja valita ladattavan tiedoston.

Lisää seuraava koodi osoitteeseen 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>

TÄSSÄ,

käyttää ankkuriapuohjelmaa luodakseen linkin uuteen lähetettyyn tiedostoon kuvahakemistossa. Nimi haetaan kuvan metatiedoista, jotka välitetään näkymään, kun tiedosto on ladattu onnistuneesti.

Luodaan nyt ohjain, joka vastaa kuvan lataamiseen

Lisää uusi tiedosto ImageUploadController.php kohtaan application/controllers

Lisää seuraava koodi tiedostoon 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);
        }
    }

}

TÄSSÄ,

luokka ImageUploadController laajentaa CI_Controller {…} määrittää ohjainluokkamme ja laajentaa perusohjainta CI_Controller
julkinen funktio __construct() {…} alustaa emokonstruktorimenetelmän ja lataa url- ja lomakeapuohjelmat
public function index() {…} määrittää indeksimenetelmän, jota käytetään kuvien latauslomakkeen näyttämiseen
public function store() {…} määrittää menetelmän, jolla kuva ladataan ja tallennetaan verkkosovelluspalvelimelle.

$config['upload_path'] = './images/'; määrittää hakemiston, johon kuvat ladataan
$config['allowed_types'] = 'gif|jpg|png'; määrittää hyväksyttävät tiedostopäätteet. Tämä on tärkeää turvallisuussyistä. Sallitut tyypit varmistavat, että vain kuvia ladataan ja muita tiedostotyyppejä, kuten php, ei voida ladata, koska ne voivat vaarantaa palvelimen.
$config['max_size'] = 2000; aseta tiedostojen enimmäiskoko kilotavuina. Esimerkissämme ladattavan tiedoston enimmäiskoko on 2,000 2 kt lähes 2,000 megatavua. Jos käyttäjä yrittää ladata yli XNUMX XNUMX kt:n tiedoston, kuvan lataus epäonnistuu ja kirjasto palauttaa virheilmoituksen.
$config['max_width'] = 1500; asettaa kuvan enimmäisleveyden, joka meidän tapauksessamme on 1,500 XNUMX px. Tätä suurempi leveys aiheuttaa virheen
$config['max_height'] = 1500; määrittelee suurimman sallitun korkeuden.
$this->load->library('lataa', $config); lataa latauskirjaston ja alustaa sen taulukolla $config, jonka määritimme yllä.
if (!$this->upload->do_upload('profile_image')) {…} yrittää ladata lähetetyn kuvan, joka on tässä tapauksessa nimeltä profile_image
$error = array('error' => $this->upload-> display_errors()); asettaa virheilmoituksen, jos lataus epäonnistuu
$this->load->view('files/upload_form', $error); lataa tiedoston latauslomakkeen ja näyttää latauskirjastosta palautetun virhesanoman
$tiedot = array('image_metadata' => $this->load->data()); asettaa kuvan metatiedot, jos lataus on onnistunut
$this->load->view('files/upload_result', $data); lataa onnistuneesti ladatun näkymän ja välittää ladatun tiedoston metatiedot.

Siinä se ohjaimelle. Luodaan nyt hakemisto, johon kuvamme ladataan. Luo uusi hakemisto "images" sovelluksesi juurihakemistoon

Lopuksi lisäämme routes.php-tiedostoomme kaksi reittiä, jotka näyttävät lomakkeen ja tulokset

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

TÄSSÄ,

$route['upload-image'] = 'imageuploadcontroller'; määrittää URL-latauskuvan, joka kutsuu ImageUploadControllerin indeksimenetelmää
$route['store-image'] = 'imageuploadcontroller/store'; määrittää URL-kaupan kuvan, joka hyväksyy valitun käyttäjätiedoston ja lähettää sen palvelimelle.

Sovelluksen testaus

Aloitetaan sisäänrakennettu PHP-palvelin

Avaa pääte/komentorivi ja selaa sovelluksesi juureen. Minun tapauksessani juuri sijaitsee asemassa C:\Sites\ci-app

cd C:\Sites\ci-app

käynnistä palvelin seuraavalla komennolla

php -S localhost:3000

Lataa seuraava URL-osoite verkkoselaimeen: http://localhost:3000/upload-image

voit nähdä seuraavat tulokset

Napsauta valitse tiedosto

Sinun pitäisi pystyä näkemään seuraavan kaltainen valintaikkuna

Valitse haluamasi kuva ja napsauta sitten Avaa

Valitun tiedoston nimi näkyy lomakkeen latauksessa yllä olevan kuvan mukaisesti. Napsauta kuvan latauspainiketta

Saat seuraavat tulokset olettaen, että kaikki menee hyvin

Klikkaa Näytä kuvani! Linkki

Sinun pitäisi voida nähdä lataamasi kuva. Tulokset ovat seuraavanlaiset

Huomaa, että ladatun kuvan nimi näkyy URL-osoitteessa. Saimme kuvan nimen ladattujen kuvan metatiedoista

Huomautus: Tiedostojen latausprosessi pysyy samana muun tyyppisille tiedostoille

Saatat tykätä:

CodeIgniter-tiedoston lataus

Kuvien lataaminen CodeIgniteriin

Sovelluksen testaus

AIHEESEEN LIITTYVÄT ARTIKKELIT