Come caricare immagini e file in CodeAccenditore (con esempio)

⚡ Riepilogo intelligente

CodeIgniter File Upload utilizza la libreria Upload integrata per trasferire immagini e documenti da un modulo HTML a una directory del server. Questo esempio crea un modulo di caricamento, un controller che convalida il tipo e le dimensioni del file e una pagina di risultati che conferma l'avvenuto caricamento.

📁 Corso base: La libreria Upload gestisce le operazioni di back-end relative alla convalida del file inviato e alla sua scrittura nella directory di caricamento selezionata.
️ Due parti: Per caricare un file è necessario un modulo HTML front-end con un campo di input di tipo file, oltre a un controller back-end che elabori l'invio.
🔒 Tipo Whitelist: La configurazione allowed_types accetta solo le estensioni elencate, come gif, jpg e png, bloccando file potenzialmente pericolosi come gli script PHP.
📏 Limiti di dimensione: Le chiavi max_size, max_width e max_height rifiutano i file che superano i limiti e restituiscono un messaggio di errore chiaro.
📝 Codifica del modulo: Il modulo deve impostare enctype su multipart/form-data, altrimenti il file selezionato non raggiungerà mai il server.
📄 Metadati dei risultati: In caso di successo, upload->data() restituisce i dettagli del file utilizzati per creare un collegamento all'immagine appena salvata.
🤖 Assistenza AI: Gli strumenti di intelligenza artificiale possono generare il modulo di caricamento, le regole di convalida del controller e la gestione degli errori, per poi analizzarli alla ricerca di falle di sicurezza.

Scopri di più

CodeCaricamento file Igniter

La gestione dei file è essenziale per la maggior parte delle applicazioni web. Se stai sviluppandoping Se si utilizza un sistema di gestione dei contenuti, sarà necessario poter caricare immagini, documenti Word, report PDF e altro ancora. Se si lavora su un sito di abbonamento, potrebbe essere necessario prevedere la possibilità per gli utenti di caricare le proprie immagini del profilo. CodeLa classe Igniter File Uploading ci permette di fare facilmente tutto quanto sopra descritto.

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

Caricamento delle immagini in CodeAccenditore

Caricamento file in CodeAccenditore Il sistema è composto da due parti principali: il frontend e il backend. Il frontend è gestito dal modulo HTML che utilizza il tipo di input "file". Nel backend, la libreria di caricamento file elabora i dati inviati tramite il modulo e li scrive nella directory di caricamento.

Cominciamo con il modulo di inserimento dati.

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 visualizza i risultati dell'immagine caricata, incluso un link su cui è possibile cliccare 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(0)?>" 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 di errore è stata impostata. Se il risultato è vero, l'errore restituito dalla libreria di caricamento viene visualizzato all'utente.
La funzione di selezione file consente all'utente di navigare nel proprio computer e selezionare un file da caricare.

Aggiungi il seguente codice al file 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 anchor per creare un collegamento al file appena caricato nella directory delle immagini. Il nome viene recuperato dai metadati dell'immagine che vengono passati alla vista una volta che il file è stato caricato correttamente.

Creiamo ora il controller che risponderà al caricamento dell'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 immagini e che altri tipi di file, come quelli PHP, non possano essere caricati, poiché potrebbero compromettere il server.
- $config['max_size'] = 2000; imposta la dimensione massima del file in kilobyte. Nel nostro esempio, il file massimo che può essere caricato è di 2,000 kb, circa 2 MB. Se l'utente tenta di caricare un file di dimensioni superiori a 2,000 kb, il caricamento dell'immagine non andrà a buon fine e la libreria restituirà un messaggio di errore.
- $config['max_width'] = 1500; imposta la larghezza massima dell'immagine, che nel nostro caso è di 1,500 px. Qualsiasi larghezza superiore a questo valore 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.
- se (!$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 controller. Ora creiamo la directory in cui verranno caricate le immagini. Crea una nuova directory chiamata "images" nella directory principale della tua applicazione.

Infine, aggiungeremo due percorsi al nostro file routes.php che visualizzeranno il modulo e i risultati.

Apri application/config/routes.php e aggiungi le seguenti rotte

$route['upload-image'] = 'imageuploadcontroller';
$route['store-image'] = 'imageuploadcontroller/store';

QUI,

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

Come risolvere i problemi comuni CodeErrori di caricamento file in Igniter

La maggior parte degli errori di caricamento restituisce un messaggio chiaro dalla libreria di caricamento. L'elenco seguente illustra gli errori più comuni e le relative soluzioni.

Il tipo di file che stai tentando di caricare non è consentito: Aggiungi l'estensione mancante alla configurazione allowed_types, ad esempio 'gif|jpg|png|pdf'.
Il file che stai tentando di caricare è di dimensioni superiori a quelle consentite: Aumenta il valore di max_size e verifica che upload_max_filesize e post_max_size nel file php.ini siano sufficientemente grandi.
Il percorso di caricamento non sembra essere valido: crea la directory upload_path e assicurati che il server web abbia i permessi di scrittura su di essa.
Non hai selezionato alcun file da caricare: Verifica che il nome del campo di input corrisponda all'argomento do_upload() e che il modulo utilizzi il tipo di dato multipart/form-data.

Testare l'applicazione

Avviamo il server PHP integrato.

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

cd C:\Sites\ci-app

Avvia il server utilizzando il seguente comando

php -S localhost:3000

Caricare quanto segue URL nel tuo browser web: http://localhost:3000/upload-image

Potrai visualizzare 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 qui sopra. Fare clic sul pulsante Carica immagine.

Se tutto va bene, otterrai i seguenti risultati.

Fai clic sul link "Visualizza la mia immagine!"

Dovresti essere in grado di visualizzare l'immagine che hai caricato. Il risultato sarà simile al seguente.

Nota che il nome dell'immagine caricata viene visualizzato in URLIl nome dell'immagine è stato ricavato dai metadati dell'immagine caricata.

Nota: la procedura di caricamento dei file rimane invariata anche per gli altri tipi di file.

DOMANDE FREQUENTI

Migliori CodeLa libreria Upload di Igniter 3 gestisce un file per ogni chiamata a do_upload(), quindi si itera su $_FILES e si chiama la funzione per ogni elemento. CodeIgniter 4 supporta il caricamento multiplo direttamente tramite il metodo getFileMultiple().

No. CodeIgniter 4 sostituisce la libreria Upload con l'API Request file. Invece di caricare una libreria Upload separata, si chiama `$this->request->getFile('field')`, si convalida il file e poi si usa `move()` per memorizzarlo.

Imposta $config['encrypt_name'] = TRUE per assegnare un nome casuale a ciascun file, oppure imposta $config['file_name'] su un valore a tua scelta. Questo impedisce la sovrascrittura di file esistenti che condividono lo stesso nome originale.

Sì. L'IA può generare la whitelist dei tipi consentiti, i limiti di dimensione e la gestione degli errori, oltre a suggerire controlli aggiuntivi come la verifica del tipo MIME effettivo. Prima della distribuzione, testa sempre le regole generate su file reali.

Sì. Incolla il messaggio di errore e il tuo controller, e l'IA può individuare problemi come un modulo multipart mancante, un upload_path non scrivibile o un'estensione mancante da allowed_types, quindi suggerire la soluzione.

Come caricare immagini e file in CodeAccenditore (con esempio)

CodeCaricamento file Igniter

Caricamento delle immagini in CodeAccenditore

Come risolvere i problemi comuni CodeErrori di caricamento file in Igniter

Testare l'applicazione

DOMANDE FREQUENTI

Riassumi questo post con:

Iscriviti alla newsletter