L’argomento di questa pillola è stato preso da “Beginnig AJAX with PHP - Apress” e siccome può essere interessante lo spiego brevemente, è un sistema per l’upload di immagini sul server con ridimensionamento “al volo” tramite AJAX in 3 formati diversi scelti dall’utente: small, medium e large. Innanzitutto cominciamo a creare una semplice pagina per l’upload:
file: index.html
L’utilizzo di un iframe è dovuto al fatto che javascript non ha accesso al file system del nostro pc, quindi non sarebbe stato possibile caricare un file tramite l’oggetto XMLHttpRequest. Alcuni sviluppatori hanno capito però che è possibile utilizzare un iframe nascosto per consentire di caricare un file senza un completo ricaricamento della pagina, così settando su none la proprietà dell’iframe nel css l’elemento è presente nella pagina pronto per essere utilizzato ma è totalmente invisibile all’utente finale.Codice PHP:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Upload image</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript" src="functions.js"></script>
</head>
<body>
<div id="showimg"></div>
<form id="uploadform" action="process_upload.php" method="post" enctype="multipart/form-data" target="uploadframe" onsubmit="uploadimg(this); return false">
Upload a File:
<input type="file" id="myfile" name="myfile" />
<input type="submit" value="Submit" />
<iframe id="uploadframe" name="uploadframe" src="process_upload.php" class="noshow"></iframe>
</form>
</body>
</html>
Nota: la classe no show è ciò che renderà effettivamente invisibile l’iframe.
Ora analizziamo il codice necessario all’upload dell’immagine:
file: process_upload.php
Ho preferito commentare direttamente il codice per una comprensione migliore e più veloce, così da avere i commenti anche dopo aver fatto il classico “copia/incolla” per provare lo script in locale.Codice PHP:<?php
//Array con i divertsi tipi MIME accettati.
$allowedtypes = array ("image/jpeg","image/pjpeg","image/png","image/gif");
//Cartella dove vogliamo salvare il nostro file.
$savefolder = "images";
//Controlla se abbiamo un file valido.
if (isset ($_FILES['myfile'])){
//Poi verifica se è un tipo di file accettato.
if (in_array ($_FILES['myfile']['type'], $allowedtypes)){
//Quindi procede con la copia.
if ($_FILES['myfile']['error'] == 0){
$thefile = $savefolder . "/" . $_FILES['myfile']['name'];
if (!move_uploaded_file ($_FILES['myfile']['tmp_name'], $thefile)){
echo "There was an error uploading the file.";
} else {
//Segnala di caricare l'immagine.
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="functions.js"></script>
</head>
<body onload="doneloading (parent,'<?=$thefile?>')">
[img]<?=$thefile?>[/img]
</body>
</html>
<?php
}
}
}
}
?>
Nel caso non avessimo i permessi necessari per accedere alla cartella images (specificata nel file precedente) basta usare il comando chmod in questo modo:
chmod 777 /percorso/cartella/images
Passiamo ora all’analisi del file necessario all’elaborazione delle AJAX requests:
file: xmlhttp.js
Siamo arrivati alla parte più interessante della pillola, la creazione automatica delle thumbnails, con la possibilità di scegliere 3 diverse grandezze che andremo a definire tra poco:Codice PHP://Funzione per creare un oggetto XMLHttp.
function getxmlhttp (){
//Crea una variabile booleana per controllare se c'è un'istanza valida della Microsoft ActiveX.
var xmlhttp = false;
//Controlla se stiamo utilizzando Internet Explorer.
try {
//Se la versione di Javascript è superiore alla 5.
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
//Se no usa il vecchio oggetto ActiveX
try {
//Se stiamo usando Internet Explorer.
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
//Altrimenti stiamo usando un browser diverso da Internet Explorer.
xmlhttp = false;
}
}
//Se non stiamo usando IE, crea un'istanza di Javascript dell'oggetto.
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
//Funzione per elaborare un XMLHttpRequest
function processajax (obj, serverPage){
//Ottiene l'oggetto XMLHttpRequest per poterlo usare.
var theimg;
xmlhttp = getxmlhttp ();
xmlhttp.open("GET", serverPage);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(obj).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
file: showimg.php
Una volta cliccato su Small, Medium o Large avremo automaticamente l’immagine di quella determinata dimensione già salvata nella cartella images, differenziandole da quella originale per l’aggiunta di s, m o l alla fine del file prima dell’estensione grazie a questa classe php che costruisce il nuovo nome dell’immagine:Codice PHP:<?php
$file = $_GET['thefile'];
//Controllo per vedere se l'immagine esiste.
if (!is_file($file) || !file_exists($file))
exit;
?>
[img]<?= $file ?>[/img]
Change Image Size:
[url="thumb.php?img=<?= $file ?>&sml=s"]','s'); return false;">Small[/url]
[url="thumb.php?img=<?= $file ?>&sml=m"]','m'); return false;">Medium[/url]
[url="thumb.php?img=<?= $file ?>&sml=l"]','l'); return false;">Large[/url]
</p>
file: thumb.php
Arrivati a questo punto mancano solo da descrivere il file per la gestione delle funzioni e il css per dare una grafica, anche se minimale, al nostro script:Codice PHP:<?php
function setWidthHeight($width, $height, $maxWidth, $maxHeight) {
$ret = array($width, $height);
$ratio = $width / $height;
if ($width > $maxWidth || $height > $maxHeight) {
$ret[0] = $maxWidth;
$ret[1] = $ret[0] / $ratio;
if ($ret[1] > $maxHeight) {
$ret[1] = $maxHeight;
$ret[0] = $ret[1] * $ratio;
}
}
return $ret;
}
//Una funzione per cambiare la grandezza dell'immagine.
function createthumb($img, $size = "s") {
//Prima controlla se il file è valido.
if (is_file($img)) {
//Ora prende la grandezza del file originale.
if ($cursize = getimagesize ($img)) {
//E in base alle variabili Small(s), Medium(m) e Large(l) ricava la nuova dimensione che vogliamo.
$sizes = array("s" => 100, "m" => 300, "l" => 600);
if (!array_key_exists($size, $sizes))
$size = "s";
$newsize = setWidthHeight($cursize[0],
$cursize[1],
$sizes[$size],
$sizes[$size]);
//Ora che abbiamo i vincoli sulle dimensioni trova il tipo di file.
$thepath = pathinfo ($img);
//Imposta la nostra anteprima.
$dst = imagecreatetruecolor ($newsize[0],$newsize[1]);
//Costruisce il nome del file (alla fine del nome, prima dell'estensione, viene aggiunta la lettera corrispondente alla dimensione).
$filename = str_replace (".".$thepath['extension'], "", $img);
$filename = $filename . "_th" . $size . "." . $thepath['extension'];
$types = array('jpg' => array('imagecreatefromjpeg', 'imagejpeg'),
'jpeg' => array('imagecreatefromjpeg', 'imagejpeg'),
'gif' => array('imagecreatefromgif', 'imagegif'),
'png' => array('imagecreatefrompng', 'imagepng'));
$func = $types[$thepath['extension']][0];
$src = $func($img);
//Crea la copia.
imagecopyresampled($dst, $src, 0, 0, 0, 0,
$newsize[0], $newsize[1],
$cursize[0], $cursize[1]);
//Crea l'anteprima.
$func = $types[$thepath['extension']][1];
$func($dst, $filename);
?>
[img]<?= $filename ?>[/img]
Change Image Size:
[url="thumb.php?img=<?=$img?>&sml=s"]','s'); return false;">Small[/url]
[url="thumb.php?img=<?=$img?>&sml=m"]','m'); return false;">Medium[/url]
[url="thumb.php?img=<?=$img?>&sml=l"]','l'); return false;">Large[/url]
</p>
<?php
return;
}
}
echo "No image found.";
}
createthumb($_GET['img'], $_GET['sml']);
?>
file: functions.js
file: style.cssCodice PHP://Funzione per stabilire quando il file process_upload.php ha terminato l'esecuzione.
function doneloading(theframe,thefile){
var theloc = "showimg.php?thefile=" + thefile
theframe.processajax ("showimg",theloc);
}
function uploadimg (theform){
//Invio al form.
theform.submit();
//Mostra un messaggio di caricamento all'utente.
setStatus ("Loading...","showimg");
}
//Funzione per fissare lo stato del caricamento.
function setStatus (theStatus, theObj){
obj = document.getElementById(theObj);
if (obj){
obj.innerHTML = "<div class=\"bold\">" + theStatus + "</div>";
}
}
function changesize (img, sml){
//Mostra un messaggio di caricamento all'utente.
theobj = document.getElementById("showimg");
if (theobj){
setStatus ("Loading...","showimg");
var loc = "thumb.php?img=" + img + "&sml=" + sml;
processajax ("showimg",loc);
}
}
Bene, la pillola termina qui e abbiamo visto com’è possibile creare della applicazioni per il web molto interessanti tramite l’uso combinato di AJAX e PHP, l’importante è ricordarsi sempre di aggiungere un messaggio di caricamento (“Loading…” nel nostro caso) per incrementare la user’s experience dell’utente finale.Codice PHP:body {
font-family: verdana, arial, helvetica;
font-size: 11px;
color: #000000;
}
iframe {
display: none;
}
Questo è tutto, è la mia prima pillola e chiedo scusa se magari non è molto chiara. Spero possa servire a qualcuno anche solo come spunto per ulteriori approfondimenti.
Ciao.
Rispondi quotando
