Kako prenijeti sliku i datoteku u CodeIgniter (s primjerom)

Prijenos datoteke CodeIgniter

Upravljanje datotekama bitno je za većinu web aplikacija. Ako razvijate sustav za upravljanje sadržajem, morat ćete moći učitavati slike, word dokumente, pdf izvješća itd. Ako radite na web stranici za članstvo, možda ćete morati omogućiti ljudima da učitaju svoje profile slike. CodeIgniter-ova klasa za učitavanje datoteka olakšava nam sve gore navedeno.

U ovom vodiču ćemo pogledati kako koristiti biblioteku za učitavanje datoteka za učitavanje datoteka.

Prijenos slika u CodeIgniter

Prijenos datoteke u CodeIgniter ima dva glavna dijela. Frontend i backend. Sučeljem upravlja HTML obrazac koji koristi datoteku vrste unosa obrasca. Na pozadini, biblioteka za učitavanje datoteka obrađuje poslani unos iz obrasca i zapisuje ga u direktorij za učitavanje.

Počnimo s obrascem za unos.

Stvorite novi direktorij pod nazivom datoteke u direktoriju aplikacija/pogleda

Dodajte sljedeće datoteke u aplikaciju/views/files

upload_form.php – ovaj prikaz sadrži HTML formu koja ima ulazni tip datoteke i šalje odabranu datoteku poslužitelju na obradu
upload_result.php – ovaj prikaz prikazuje rezultate učitane slike uključujući poveznicu koju možemo kliknuti da bismo vidjeli rezultate.

Dodajte sljedeći kod u 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>

OVDJE,

if (isset($error)){…} provjerava je li varijabla pogreške postavljena. Ako je rezultat istinit, korisniku se prikazuje pogreška koju vraća biblioteka za učitavanje.
vrsta datoteke omogućuje korisniku da pretraži svoje računalo i odabere datoteku za učitavanje.

Dodajte sljedeći kod u 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>

OVDJE,

koristi pomoćnik sidra za stvaranje poveznice na novu učitanu datoteku u direktoriju slika. Naziv se dohvaća iz metapodataka slike koji se prosljeđuju prikazu kada je datoteka uspješno učitana.

Kreirajmo sada kontroler koji će reagirati na naš prijenos slike

Dodajte novu datoteku ImageUploadController.php u Application/controllers

Dodajte sljedeći kod u 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);
        }
    }

}

OVDJE,

klasa ImageUploadController proširuje CI_Controller {…} definira našu klasu kontrolera i proširuje osnovni kontroler CI_Controller
javna funkcija __construct() {…} inicijalizira nadređenu metodu konstruktora i učitava url i pomoćnike obrazaca
javna funkcija index() {…} definira metodu indeksa koja se koristi za prikaz obrasca za učitavanje slike
javna funkcija store() {…} definira metodu koja će učitati sliku i pohraniti je na poslužitelju web aplikacija.

$config['upload_path'] = './images/'; postavlja direktorij u koji se slike trebaju učitavati
$config['allowed_types'] = 'gif|jpg|png'; definira prihvatljive ekstenzije datoteka. Ovo je važno iz sigurnosnih razloga. Dopušteni tipovi osiguravaju da se samo slike učitavaju, a druge vrste datoteka kao što je php ne mogu se učitavati jer mogu ugroziti poslužitelj.
$config['max_size'] = 2000; postavite maksimalnu veličinu datoteke u kilobajtima. U našem primjeru, najveća datoteka koja se može prenijeti je 2,000 kb, blizu 2 MB. Ako korisnik pokuša učitati datoteku veću od 2,000 kb, tada se slika neće uspjeti učitati i biblioteka će vratiti poruku o pogrešci.
$config['max_width'] = 1500; postavlja maksimalnu širinu slike koja je u našem slučaju 1,500 px. Svaka širina veća od te rezultira pogreškom
$config['max_height'] = 1500; definira maksimalnu prihvatljivu visinu.
$this->load->library('upload', $config); učitava biblioteku za učitavanje i inicijalizira je s nizom $config koji smo gore definirali.
if (!$this->upload->do_upload('profile_image')) {…} pokušava prenijeti poslanu sliku koja se u našem slučaju zove profile_image
$greška = niz('greška' => $ovo->upload->display_errors()); postavlja poruku o pogrešci ako učitavanje ne uspije
$this->load->view('files/upload_form', $error); učitava obrazac za učitavanje datoteke i prikazuje poruku o pogrešci koja se vraća iz biblioteke za učitavanje
$data = array('image_metadata' => $this->upload->data()); postavlja metapodatke slike ako je prijenos bio uspješan
$this->load->view('files/upload_result', $data); učitava uspješno učitani prikaz i prosljeđuje metapodatke učitane datoteke.

To je to za kontroler. Kreirajmo sada direktorij u koji će naše slike biti učitane. Stvorite novi direktorij "slike" u korijenskom direktoriju svoje aplikacije

Na kraju ćemo dodati dvije rute u datoteku routes.php koja će prikazati obrazac i rezultate

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

OVDJE,

$route['upload-image'] = 'imageuploadcontroller'; definira URL upload-image koji poziva metodu indeksa ImageUploadControllera
$route['store-image'] = 'imageuploadcontroller/store'; definira URL store-image koji prihvaća odabranu korisničku datoteku i postavlja je na poslužitelj.

Testiranje aplikacije

Pokrenimo ugrađeni PHP poslužitelj

Otvorite terminal/naredbeni redak i potražite korijen svoje aplikacije. U mom slučaju, root se nalazi u disku C:\Sites\ci-app

cd C:\Sites\ci-app

pokrenite poslužitelj pomoću sljedeće naredbe

php -S localhost:3000

Učitajte sljedeći URL u svoj web preglednik: http://localhost:3000/upload-image

moći ćete vidjeti sljedeće rezultate

Kliknite na odabir datoteke

Trebali biste moći vidjeti dijaloški prozor sličan sljedećem

Odaberite željenu sliku i kliknite na Otvori

Naziv odabrane datoteke pojavit će se u obrascu za prijenos kao što je prikazano na gornjoj slici. Kliknite gumb za učitavanje slike

Dobit ćete sljedeće rezultate pod pretpostavkom da sve bude u redu

Kliknite na Pogledaj moju sliku! Veza

Trebali biste moći vidjeti sliku koju ste učitali. Rezultati će biti slični sljedećim

Primijetite da je naziv učitane slike prikazan u URL-u. Dobili smo naziv slike iz učitanih metapodataka slike

Napomena: Postupak prijenosa datoteke ostaje isti za druge vrste datoteka

Možda ti se svidi:

Prijenos datoteke CodeIgniter

Prijenos slika u CodeIgniter

Testiranje aplikacije

POVEZANI ČLANCI