Cum să încărcați imaginea și fișierul în CodeIgniter (cu exemplu)

Încărcarea fișierului CodeIgniter

Gestionarea fișierelor este esențială pentru majoritatea aplicațiilor web. Dacă dezvoltați un sistem de management al conținutului, atunci va trebui să puteți încărca imagini, documente word, rapoarte pdf etc. Dacă lucrați pe un site de membru, este posibil să trebuiască să luați o prevedere pentru ca oamenii să-și încarce profilul imagini. Clasa de încărcare a fișierelor CodeIgniter ne face ușor să facem toate cele de mai sus.

În acest tutorial, vom vedea cum să folosiți biblioteca de încărcare a fișierelor pentru a încărca fișiere.

Încărcarea imaginilor în CodeIgniter

Se încarcă fișierul în CodeIgniter are două părți principale. Frontend-ul și backend-ul. Interfața este gestionată de formularul HTML care utilizează fișierul de tip de intrare al formularului. Pe backend, biblioteca de încărcare a fișierelor procesează intrarea trimisă din formular și o scrie în directorul de încărcare.

Să începem cu formularul de introducere.

Creați un nou director numit fișiere în directorul aplicație/vizualizări

Adăugați următoarele fișiere în aplicație/vizualizări/fișiere

upload_form.php – această vizualizare conține formularul HTML care are tipul de fișier de intrare și trimite fișierul selectat la server pentru procesare
upload_result.php – această vizualizare afișează rezultatele imaginii încărcate, inclusiv un link pe care îl putem face clic pentru a vedea rezultatele.

Adăugați următorul cod la 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>

AICI,

if (isset($error)){…} verifică dacă variabila de eroare a fost setată. Dacă rezultatul este adevărat, atunci eroarea returnată de biblioteca de încărcare este afișată utilizatorului.
fișierul de tip permite utilizatorului să navigheze pe computerul său și să selecteze un fișier pentru încărcare.

Adaugă următorul cod la 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>

AICI,

folosește ajutorul de ancorare pentru a crea un link către noul fișier încărcat în directorul de imagini. Numele este preluat din metadatele imaginii care sunt transmise vizualizării când fișierul a fost încărcat cu succes.

Acum să creăm controlerul care va răspunde la încărcarea imaginii noastre

Adăugați un fișier nou ImageUploadController.php în aplicație/controlere

Adăugați următorul cod la 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);
        }
    }

}

AICI,

clasa ImageUploadController extinde CI_Controller {…} definește clasa noastră de controler și extinde controlerul de bază CI_Controller
funcția publică __construct() {…} inițializează metoda constructorului părinte și încarcă url-ul și ajutoarele de formular
funcția publică index() {…} definește metoda indexului care este utilizată pentru afișarea formularului de încărcare a imaginii
public function store() {…} definește metoda care va încărca imaginea și o va stoca pe serverul de aplicații web.

$config['upload_path'] = './images/'; setează directorul în care ar trebui să fie încărcate imaginile
$config['allowed_types'] = 'gif|jpg|png'; definește extensiile de fișiere acceptabile. Acest lucru este important din motive de securitate. Tipurile permise asigură că sunt încărcate numai imagini și că alte tipuri de fișiere, cum ar fi php, nu pot fi încărcate, deoarece au potențialul de a compromite serverul.
$config['max_size'] = 2000; setați dimensiunea maximă a fișierului în kiloocteți. În exemplul nostru, fișierul maxim care poate fi încărcat este de 2,000 kb aproape de 2 MB. Dacă utilizatorul încearcă să încarce un fișier mai mare de 2,000 kb, atunci imaginea nu va putea încărca și biblioteca va returna un mesaj de eroare.
$config['max_width'] = 1500; setează lățimea maximă a imaginii care în cazul nostru este de 1,500 px. Orice lățime mai mare decât aceasta duce la o eroare
$config['max_height'] = 1500; definește înălțimea maximă acceptabilă.
$this->load->library('upload', $config); încarcă biblioteca de încărcare și o inițializează cu matricea $config pe care am definit-o mai sus.
dacă (!$this->upload->do_upload('profile_image')) {…} încearcă să încarce imaginea trimisă, care în cazul nostru se numește profile_image
$eroare = array('eroare' => $this->upload->display_errors()); setează mesajul de eroare dacă încărcarea eșuează
$this->load->view('files/upload_form', $error); încarcă formularul de încărcare a fișierului și afișează mesajul de eroare care este returnat din biblioteca de încărcare
$date = array('image_metadata' => $this->upload->data()); setează metadatele imaginii dacă încărcarea a avut succes
$this->load->view('files/upload_result', $data); încarcă vizualizarea încărcată cu succes și transmite metadatele fișierului încărcat.

Asta este pentru controler. Să creăm acum directorul în care vor fi încărcate imaginile noastre. Creați un nou director „imagini” în directorul rădăcină al aplicației dumneavoastră

În cele din urmă, vom adăuga două rute în fișierul nostru routes.php care vor afișa formularul și vor afișa rezultatele

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

AICI,

$route['upload-image'] = 'imageuploadcontroller'; definește URL-ul upload-image care apelează metoda index a ImageUploadController
$route['store-image'] = 'imageuploadcontroller/store'; definește URL-ul imagine-magazin care acceptă fișierul utilizator selectat și îl încarcă pe server.

Testarea aplicației

Să pornim serverul PHP încorporat

Deschideți terminalul/linia de comandă și navigați la rădăcina aplicației dvs. În cazul meu, rădăcina se află în unitatea C:\Sites\ci-app

cd C:\Sites\ci-app

porniți serverul folosind următoarea comandă

php -S localhost:3000

Încărcați următoarea adresă URL în browserul dvs. web: http://localhost:3000/upload-image

veți putea vedea următoarele rezultate

Faceți clic pe alegeți fișierul

Ar trebui să puteți vedea o fereastră de dialog similară cu următoarea

Selectați imaginea dorită, apoi faceți clic pe deschidere

Numele fișierului selectat va apărea în formularul de încărcare, așa cum se arată în imaginea de mai sus. Faceți clic pe butonul de încărcare a unei imagini

Veți obține următoarele rezultate presupunând că totul merge bine

Faceți clic pe Vezi imaginea mea! Legătură

Ar trebui să puteți vedea imaginea pe care ați încărcat-o. Rezultatele vor fi similare cu următoarele

Observați că numele imaginii încărcate este afișat în adresa URL. Am primit numele imaginii din metadatele imaginii încărcate

Notă: Procesul de încărcare a fișierelor rămâne același pentru alte tipuri de fișiere

S-ar putea sa-ti placa:

Încărcarea fișierului CodeIgniter

Încărcarea imaginilor în CodeIgniter

Testarea aplicației

ARTICOLE SIMILARE