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
Fare clic su scegli file
Dovresti essere in grado di vedere una finestra di dialogo simile alla seguente
Seleziona l'immagine desiderata, quindi fai clic su Apri
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
Fare clic su Visualizza la mia immagine! Collegamento
Dovresti riuscire a vedere l'immagine che hai caricato. I risultati saranno simili ai seguenti
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