Come caricare immagini e file in CodeIgniter (con esempio)

Caricamento file CodeIgniter

La gestione dei file è essenziale per la maggior parte delle applicazioni Web. Se stai sviluppando un sistema di gestione dei contenuti, dovrai essere in grado di caricare immagini, documenti Word, report PDF, ecc. Se stai lavorando su un sito di appartenenza, potresti dover prendere una disposizione affinché le persone possano caricare il proprio profilo immagini. La classe di caricamento file di CodeIgniter ci consente di eseguire facilmente tutto quanto sopra.

In questo tutorial, vedremo come utilizzare la libreria di caricamento file per caricare file.

Caricamento di immagini in CodeIgniter

Caricamento file in CodeIgniter ha due parti principali. Il frontend e il backend. Il frontend è gestito dal modulo HTML che utilizza il file di tipo input del modulo. Sul backend, la libreria di caricamento file elabora l'input inviato dal modulo e lo scrive nella directory di caricamento.

Cominciamo con il modulo di input.

Crea una nuova directory chiamata files nella directory application/views

Aggiungere i seguenti file in application/views/files

  • upload_form.php – questa vista contiene il modulo HTML che ha il tipo di input del file e invia il file selezionato al server per l'elaborazione
  • upload_result.php – questa vista mostra i risultati dell'immagine caricata incluso un collegamento su cui possiamo fare clic per visualizzare i risultati.


Aggiungere il seguente codice a 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>

QUI,

  • if (isset($error)){…} controlla se la variabile error è stata impostata. Se il risultato è vero, all'utente viene visualizzato l'errore restituito dalla libreria di caricamento.
  • il tipo di file consente all'utente di navigare sul proprio computer e selezionare un file per il caricamento.

Aggiungere il seguente codice a 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>

QUI,

  • utilizza l'helper di ancoraggio per creare un collegamento al nuovo file caricato nella directory delle immagini. Il nome viene recuperato dai metadati dell'immagine passati alla vista quando il file è stato caricato correttamente.

Creiamo ora il controller che risponderà al caricamento della nostra immagine

Aggiungi un nuovo file ImageUploadController.php in application/controllers

Aggiungere il seguente codice a 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);
        }
    }

}

QUI,

  • class ImageUploadController extends CI_Controller {…} definisce la nostra classe controller ed estende il controller di base CI_Controller
  • la funzione pubblica __construct() {…} inizializza il metodo del costruttore genitore e carica l'URL e gli helper del modulo
  • public function index() {...} definisce il metodo di indice utilizzato per visualizzare il modulo di caricamento delle immagini
  • public function store() {…} definisce il metodo che caricherà l'immagine e la memorizzerà sul server delle applicazioni web.
    • $config['upload_path'] = './images/'; imposta la directory in cui devono essere caricate le immagini
    • $config['allowed_types'] = 'gif|jpg|png'; definisce le estensioni di file accettabili. Questo è importante per motivi di sicurezza. I tipi consentiti garantiscono che vengano caricate solo le immagini e che altri tipi di file come php non possano essere caricati perché potrebbero compromettere il server.
    • $config['max_size'] = 2000; impostare la dimensione massima del file in kilobyte. Nel nostro esempio, il file massimo che può essere caricato è di 2,000 kb, vicino a 2 MB. Se l'utente tenta di caricare un file più grande di 2,000 kb, il caricamento dell'immagine non riuscirà e la libreria restituirà un messaggio di errore.
    • $config['max_width'] = 1500; imposta la larghezza massima dell'immagine che nel nostro caso è 1,500 px. Qualsiasi larghezza maggiore di quella genera un errore
    • $config['max_height'] = 1500; definisce l'altezza massima accettabile.
    • $this->load->library('upload', $config); carica la libreria di caricamento e la inizializza con l'array $config che abbiamo definito sopra.
    • if (!$this->upload->do_upload('profile_image')) {…} tenta di caricare l'immagine inviata che nel nostro caso si chiama profile_image
    • $errore = array('error' => $questo->carica->display_errors()); imposta il messaggio di errore se il caricamento fallisce
    • $this->load->view('files/upload_form', $error); carica il modulo di caricamento file e visualizza il messaggio di errore restituito dalla libreria di caricamento
    • $dati = array('image_metadata' => $questo->carica->dati()); imposta i metadati dell'immagine se il caricamento è andato a buon fine
    • $this->load->view('files/upload_result', $data); carica la vista caricata correttamente e trasmette i metadati del file caricato.

Questo è tutto per il controllore. Creiamo ora la directory in cui verranno caricate le nostre immagini. Crea una nuova directory "immagini" nella directory principale della tua applicazione

Infine, aggiungeremo due percorsi al nostro file Routes.php che visualizzerà il modulo e visualizzerà i risultati

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

QUI,

  • $route['upload-image'] = 'imageuploadcontroller'; definisce l'URL di caricamento immagine che chiama il metodo dell'indice di ImageUploadController
  • $route['store-image'] = 'imageuploadcontroller/store'; definisce l'immagine dell'archivio URL che accetta il file utente selezionato e lo carica sul server.

Testare l'applicazione

Avviamo il server PHP integrato

Apri il terminale/riga di comando e vai alla radice della tua applicazione. Nel mio caso, la radice si trova nell'unità C:\Sites\ci-app

cd C:\Sites\ci-app

avviare il server utilizzando il seguente comando

php -S localhost:3000

Carica il seguente URL nel tuo browser web: http://localhost:3000/upload-image

potrai vedere i seguenti risultati

Caricamento di immagini in CodeIgniter

Fare clic su scegli file

Dovresti essere in grado di vedere una finestra di dialogo simile alla seguente

Caricamento di immagini in CodeIgniter

Seleziona l'immagine desiderata, quindi fai clic su Apri

Caricamento di immagini in CodeIgniter

Il nome del file selezionato verrà visualizzato nel modulo di caricamento come mostrato nell'immagine sopra. Fare clic su un pulsante di caricamento immagine

Otterrai i seguenti risultati supponendo che tutto vada bene

Caricamento di immagini in CodeIgniter

Fare clic su Visualizza la mia immagine! Collegamento

Dovresti riuscire a vedere l'immagine che hai caricato. I risultati saranno simili ai seguenti

Caricamento di immagini in CodeIgniter

Nota che il nome dell'immagine caricata viene visualizzato nell'URL. Abbiamo ottenuto il nome dell'immagine dai metadati dell'immagine caricata

Nota: il processo di caricamento file rimane lo stesso per gli altri tipi di file