Semplice uploader di immagini in php

Nella guida di oggi vediamo come realizzare un semplice uploader di immagini in PHP da utilizzare per i vostri progetti web.

Ogni bravo web developer necessita di un uploader di immagini da aggiungere alle proprie applicazioni per dare la possibilità ai propri utenti di poter caricare immagini, files, o altro sul proprio progetto.  Vediamo come risolvere in pochi, semplici, passi questo problema.

Panoramica progettuale

Il nostro script sarà diviso in 2 pagine, una per permettere all’utente di scegliere l’immagine da caricare e una per il controllo degli errori e per l’upload.

Per la scelta dell’immagine inseriamo un semplice form html

<form action="upload.php" method="POST" enctype="multipart/form-data">
	<input type="file" value="scegli immagine" name="image" /><br />
	<input type="submit" value="invia" />
</form>

Il form invierà alla pagina di destinazione upload.php un array di nome $_file contenente tutte le informazioni necessarie per l’upload del file

Variabile descrizione risultato
$_FILE[‘image’][‘name’] Nome del file caricato inclusa l’estensione miofile.png
$_FILE[‘image’][‘type’] TIpo di file più l’estensione image/png
$_FILE[‘image’][‘size’] Dimensione del file in byte 13555
$_FILE[‘image’][‘tmp_name’] Nome temporaneo del file sul server /tmp/nhfsy4a
$_FILE[‘image’][‘error’] Errore associato al file

Ora andiamo a vedere la pagina upload.php, creiamo 3 funzioni check_typeget_ext get_error che ci permetteranno di lavorare in modo più ordinato al codice finale.

Funzioni di controllo e upload

La funzione check_ext controlla se l’estensione dell’immagine è tra quelle che noi abbiamo precedentemente deciso, in questo caso .png.jpg .gif, in caso affermativo la funzione restituisce true, altrimenti false.

function check_ext($tipo) {

	switch($tipo) {
		case "image/png": 
			return true;
			break;
		case "image/jpg":
			return true;
			break;
		case "image/jpeg":
			return true;
			break;
		case "image/gif":
			return true;
			break;
		default:
			return false;
			break;
	}

}

La funzione get_ext formatta l’estensione dell’immagine, infatti normalmente la variabile $_FILE memorizza l’estensione come image/estensione, la funzione restituisce un risultato come .png.

function get_ext($tipo) {

	switch($tipo) {
		case "image/png": 
			return ".png";
			break;
		case "image/jpg":
			return ".jpg";
			break;
		case "image/jpeg":
			return ".jpg";
			break;
		case "image/gif":
			return ".gif";
			break;
		default:
			return false;
			break;
	}

}

La funzione get_error restituisce un output html con l’elenco degli errori riscontrati durante l’upload, gli errori sono: immagine caricata in modo incorrettoestensione non ammessadimensione troppo grande.

function get_error($tmp, $type, $size, $max_size) {

	if(!is_uploaded_file($tmp)) {
		echo "File caricato in modo non corretto<br />";
	}
	if(!check_ext($type)) {
		echo "Estensione del file non ammesso<br />";
	}
	if($size > $max_size) {
		echo "Dimensione del file troppo grande<br />";
	}
	echo '<a href="/uploader/index.php">Torna all\'uploader</a>';

}

Ora passiamo al codice vero e proprio, creiamo 5 variabili che conterranno le informazioni per l’upload dell’immagine: rinominiamo le variabili dell’array $_FILE in modo che siano più leggibili, creiamo una variabile $max_size che conterrà la dimensione in byte massima consentita per l’upload, nel nostro caso 5242880 (5mb) e una variabile $folder che conterrà la cartella di destinazione dell’immagine.

$tmp = $_FILES['image']['tmp_name']; 
$type = $_FILES['image']['type'];
$size = $_FILES['image']['size'];
$max_size = 5242880; //dimensione massima in byte consentita
$folder = "file/"; //cartella di destinazione dell'immagine

Ora passiamo ai controlli, utilizziamo madre di php is_uploaded_file che controlla se il file è stato effettivamente caricato usando un form tramite il metodo post, controlliamo se le dimensioni dell’immagine sono uguali o inferiori a quelle date in precedenza tramite la variabile $max_size e infine usiamo la funzione check_ext creata da noi per controllare se il file caricato è un immagine in formato png, jpg o gif.

if(is_uploaded_file($tmp) && check_ext($type) && $size <= $max_size) {

Se tutte le condizioni sono state rispettate viene recuperata l’estensione dell’immagine tramite la funzione get_ext, creo il nuovo nome dell’immagine prendendo il timestamp attuale più un numero random compreso tra 0 e 999, successivamente inserisco la cartella di destinazione e l’estensione al nome dell’immagine, esempio: folder/timestamp657.gif

$ext = get_ext($type); //estensione dell'immagine
	$name = time().rand(0,999); //timestamp attuale + un numero random compreso tra 0 e 999
	$name = $name.$ext; //aggiungo al nome appena creato l'estensione
	$name = $folder.$name; //aggiungo il folder di destinazione
	//esempio risultato finale: folder/timestamp657.gif

Controllo se è possibile uploadare l’immagine inserendo la funzione move_upload_file dentro un if, se l’immagine è stata caricata con successo stamperemo a schermo il testo:

immagine caricata con successo, vai all’immagine
torna all’uploader

altrimenti stamperemo

non è stato possibile caricare l’immagine
torna all’uploader

$ext = get_ext($type); //estensione dell'immagine
$name = time().rand(0,999); //timestamp attuale + un numero random compreso tra 0 e 999
$name = $name.$ext; //aggiungo al nome appena creato l'estensione
$name = $folder.$name; //aggiungo il folder di destinazione
//esempio risultato finale: folder/timestamp657.gif
if(move_uploaded_file($tmp,$name)) {
	echo 'Immagine caricata con successo, <a href="'.$name.'"/>vai all\'immagine</a> <br />';
	echo '<a href="/uploader/index.php">Torna all\'uploader</a>';
} else {
	echo "Non è stato possibile caricare l'immagine<br />";
	echo '<a href="/uploader/index.php">Torna all\'uploader</a>';
}

Se al contrario almeno una condizione non è stata rispettata useremo la funzione get_error che restituisce tutti gli errori che sono stati effettuati.

get_error($tmp, $type, $size, $max_size);

Come avete potuto vedere il codice è molto semplice e facilmente personalizzabile, abbiamo inizialmente creato 3 funzioni per il controllo e la gestione dell’upload, creato nuove variabili che contengono le informazioni dell’immagine e dato un nuovo nome all’immagine, infine abbiamo eseguito l’upload.

Codice completo

function check_ext($tipo) {

	switch($tipo) {
		case "image/png": 
			return true;
			break;
		case "image/jpg":
			return true;
			break;
		case "image/jpeg":
			return true;
			break;
		case "image/gif":
			return true;
			break;
		default:
			return false;
			break;
	}

}

function get_ext($tipo) {

	switch($tipo) {
		case "image/png": 
			return ".png";
			break;
		case "image/jpg":
			return ".jpg";
			break;
		case "image/jpeg":
			return ".jpg";
			break;
		case "image/gif":
			return ".gif";
			break;
		default:
			return false;
			break;
	}

}

function get_error($tmp, $type, $size, $max_size) {

	if(!is_uploaded_file($tmp)) {
		echo "File caricato in modo non corretto<br />";
	}
	if(!check_ext($type)) {
		echo "Estensione del file non ammesso<br />";
	}
	if($size > $max_size) {
		echo "Dimensione del file troppo grande<br />";
	}
	echo '<a href="/uploader/index.php">Torna all\'uploader</a>';

}

$tmp = $_FILES['image']['tmp_name']; 
$type = $_FILES['image']['type'];
$size = $_FILES['image']['size'];
$max_size = 5242880; //dimensione massima in byte consentita
$folder = "file/"; //cartella di destinazione dell'immagine

if(is_uploaded_file($tmp) && check_ext($type) && $size <= $max_size) {

	$ext = get_ext($type); //estensione dell'immagine
	$name = time().rand(0,999); //timestamp attuale + un numero random compreso tra 0 e 999
	$name = $name.$ext; //aggiungo al nome appena creato l'estensione
	$name = $folder.$name; //aggiungo il folder di destinazione
	//esempio risultato finale: folder/timestamp657.gif
	if(move_uploaded_file($tmp,$name)) {
		echo 'Immagine caricata con successo, <a href="'.$name.'"/>vai all\'immagine</a> <br />';
		echo '<a href="/uploader/index.php">Torna all\'uploader</a>';
	} else {
		echo "Non è stato possibile caricare l'immagine<br />";
		echo '<a href="/uploader/index.php">Torna all\'uploader</a>';
	}
} else {

	get_error($tmp, $type, $size, $max_size);

}

Spero che l’articolo vi sia stato utile, ricordatevi di lasciare un commento con vostri consigli o domande.

  1. Gran dell’articolo. Spiegato in modo chiaro, sintetico, ma assolutamente professionale. per la tua bravura dovresti fare dei video corsi. Grazie, felicissimo d’aver preso parte alla newsletter. Per caso hai in programma di avviare anche qualche lezione java e x creare app android ? a presto. sei un grande.

  2. Bel articolo però se io volessi che il file che è stato caricato lo richiamassi a video tramite un link in un altra pagina come si fa?

  3. qualunque immagine carichi appare sempre lo stesso errore:
    File caricato in modo non corretto
    Estensione del file non ammesso
    Torna all’uploader
    ….l’estensione è giusta.
    Mi spieghi megli ocosa fa is_uploaded e $temp?

  4. Ciao, ho usato il tuo script per il carico delle immagini in ftp, ma volevo sapere se c’è un modo per allegare il file caricato in ftp all email che arriva amministratore !

  5. Gentile Giacomo, grazie per il tuo “uploader”, tanto per evitare stupidate vorrei chidere: il codice completo così come l’hai indicato va inserito TUTTO così come é nel file FUNCTIONS.PHP ? oppure va inserito in altro modo ? Anticipatamente grazie. Valter

  6. e se uno vuole far in modo che l’immagine inserita venga caricata con delle dimensioni ad esempio 200 per 200? se una persona inserisce un immagine enorme conviene tagliarla, puoi dirmi gentilmente come modifico il codice per permettere il caricamento di un img thump

  7. Ciao, io vorrei che l’utente possa scegliere le immagini da caricare solo da un elenco in una cartella sul server e non dal proprio PC.
    È possibile ottenere questo? come? visto che input type file mi indirizza sempre al mio PC?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

clean-minimal-icon-set
Up Next:

Set icone PSD clean e minimal per il web design

Set icone PSD clean e minimal per il web design