Upload di immagini con PHP e AJAX! [Versione potenziata]

Giovanni Canella

20/12/2013

8893

In un precedente articolo, vi ho mostrato come effettuare il caricamento di più immagini alla volta sul server con il solo utilizzo di PHP, in pochi semplici passaggi. Sebbene il risultato finale sia soddisfacente e non troppo difficile da realizzare, oggi introdurremo un altro "mattoncino" per renderlo completo a tutti gli effetti: AJAX!

Per chi non sapesse di cosa stiamo parlando, AJAX (acronimo di Asynchronous JavaScript and XML) è un insieme di tecnologie, volte alla realizzazione di applicazioni web dinamiche in cui invece di inviare i dati in modo sincrono (con il refresh della pagina), essi vengono inviati in background al server, agevolando l'esperienza dell'utente sotto vari punti di vista. Queste tecnologie non sono altro che:

  1. Javascript,
  2. l'oggetto XMLHttp,
  3. Un linguaggio lato server (PHPASP).

Per quanto riguarda Javascript, abbiamo due possibilità: in quanto possiamo crearci a "manina" le chiamate da effettuare, inizializzando/manipolando l'oggetto XMLHttp, oppure affidarci a framework come jQuery o Mootools, che ci mettono a disposizione delle API complete, ben documentate e perfettamente compatibili con tutti i browser!

La procedura che vi consiglio di adottare è la seconda, in quanto è ideale per progetti di medie-grosse dimensioni e non richiede troppo codice, mentre la prima ve la sconsiglio, in quanto potrebbe essere facilmente soggetta a qualche bug. D'altro canto se state solamente cercando di imparare e approfondire l'argomento la scelta ricade ovviamente su quest'ultima!

Deciso questo, e linguaggio lato server da adottare (nel caso di questo articolo è PHP), possiamo procedere!

Upload di immagini con PHP e AJAX

Nel precedente articolo abbiamo visto che utilizzando come tipo di input, file[], possiamo selezionare più file nella finestra di dialogo che ci comparirà, e  grazie al ciclo foreach,  ottenere un elemento alla volta, ma grazie ad AJAX possiamo evitare questo passaggio, in quanto l'upload anche se avviene singolarmente, ci da l'idea del caricamento multiplo.

A nostra disposizione è presente il plugin File Upload per jQuery, scritto da Sebastian Tschan, che ci permette di fare tutto ciò con pochi semplici passaggi, garantendoci un ottimo risultato; è scaricabile gratuitamente dalla pagina ufficiale del progetto su GitHub. Attualmente, nella data di stesura dell'articolo, sono arrivati alla versione 9.5.2.

Il pacchetto .zip, tar.gz che sia, conterrà un numero considerevole di file, per documentazione, esempi e altro, ma a noi interesseranno questi 2 presenti nella cartella js/.

  • jquery.iframe-transport.js,
  • jquery.fileupload.js.

E:

  • jquery.ui.widget.js

Presente in js/vendor.

Copiamoli quindi nella cartella del progetto in una cartella a nostra scelta.

HTML

Vediamo la struttura HTML dell'index.php:

<!DOCTYPE html>
<html>
<head>
	<title>Esempio di upload immagini con PHP e Ajax!</title>
	<meta charset="UTF-8">
	
	<link rel="stylesheet" href="css/style.css">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
	
	<!-- File citati precedentemente -->
	<script src="js/jquery.ui.widget.js"></script>
	<script src="js/jquery.iframe-transport.js"></script>
	<script src="js/jquery.fileupload.js"></script>
	<script src="js/main.js"></script>
</head>
<body>
	<div id="contenitore">
		<form method="post" action="upload.php" enctype="multipart/form-data"
			id="upload">
			<div id="rilascia">Rilascia l'immagine qui!</div>
			<a>Sfoglia</a> <input type="file" name="upl" multiple /> <span
				id="stato"></span>
		</form>
	</div>
</body>
</html>

 

Come notiamo, abbiamo:

  1. Incluso gli script precedentemente citati
  2. Un foglio di stile CSS, dove andremo a definire le regole base della pagina. I
  3. Inserito un <div> con id="rilascia", dove potremo effettuare il drag&drop delle immagini grazie al plugin File Upload! Infatti non ci sarà bisogno di "scomodare" jQuery UI.
 

 CSS

Contenuto del file style.css per lo stile generale della pagina

* {
	font-family: Arial;
	margin: 0;
	padding: 0;
}

body {
	background-color: #CCC;
}		
		
#upload {
	width: 50%;
	margin: 20px auto;
	background-color: #FFF;
	padding: 20px;
}

#rilascia {
	border: 1px solid #000;
	width: 50%;
	padding: 10px;
}

Giusto con un paio di linee di stile per definire colore e forma generali della pagina e per centrare il div #rilascia. Se non capite bene il funzionamento del metodo per allineare orrizotalmente un elemento vi rimando a questo articolo.Risultato HTML/CSS

Javascript

Il codice del file main.js, per 

var stato = $("#stato").val();

$('#upload').fileupload({
	dataType: "json",
	dropZone: $('#rilascia'),
	add: function(e, dati) {
		var XHR = dati.submit();
	},
	progress: function(e, dati) {
		stato.html("Caricamento in corso...");
	},
	done: function(e, dati) {
		stato.html("Terminato!");
	},
	fail: function(e, dati) {
		stato.html("Errore imprevisto durante l'upload!");
	}
});

Come prima cosa otteniamo il contenitore dello stato, e inizializziamo il plugin passando i seguenti parametri:

  • dataType: JSON Per la scelta del formato di scambio dei dati,
  • dropZone: (opzionale) Dove andiamo a selezionare lo spazio in cui vogliamo trascinare le immagini da caricare,
  • add: Quando viene aggiunta l'immagine da processare si avvia la richiesta al sever.
  • progress: Per compiere eventuali azioni quando è in atto l'upload,
  • done: Quando è terminato il caricamento,
  • fail: Cattura eventuali errori che si possono verificare.

In progress, impostiamo come stato Caricamento in corso..., e quando finisce Terminato!.

PHP

Per quanto riguarda la parte lato server, il codice è il seguente:

if(!empty($_FILES["file"])) {
    if($_FILES["file"]["error"] == 0) {
        $estensione = pathinfo($_FILES["file"]["name"], PATHINFO_EXTENSION);

        if($estensione == "png" || $estensione == "jpg") {
            $kb = 1024;
            $mb = $kb * 1024;
                
            if($_FILES["file"]["size"][$indice] < 4*$mb) {
                $risultato = move_uploaded_file($_FILES["file"]["tmp_name"][$indice], $_SERVER["DOCUMENT_ROOT"] . "/" . $_FILES["file"]["name"]);
                if($risultato) {
                    echo "File spostato con successo!";
                } else {
                    die("Errore imprevisto durante lo spostamento dell'immagine! :(");
                }
            } else {
                die("Il file selezionato è troppo grande, non deve superare 1MB!");
            }
        } else {
            die("Estensione non consentita! Hai cercato di caricare un file ." . $estensione . "!");
        }
    } else {
        die("Errore imprevisto durante il caricamento dell'immagine! :(");
    }
} else {
    die("Nessun file selezionato.");
}

Dove dopo aver fatto i controlli base per vedere se abbiamo inserito almeno un'immagine o eventuali altri errori,

if(!empty($_FILES["file"])) {
    if($_FILES["file"]["error"] == 0) {

verifichiamo che l'immagine abbia come estensione .jpg o .png,

$estensione = pathinfo($_FILES["file"]["name"], PATHINFO_EXTENSION);

if($estensione == "png" || $estensione == "jpg") {

e il file pesi meno di 4 MB:

$kb = 1024;
$mb = $kb * 1024;
                
if($_FILES["file"]["size"][$indice] < 4*$mb) {

Solo a questo punto possiamo spostare il file nella posizione che più vogliamo:

move_uploaded_file($_FILES["file"]["tmp_name"][$indice], $_SERVER["DOCUMENT_ROOT"] . "/" . $_FILES["file"]["name"]);

 

I più letti

Ti potrebbero interessare