Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it
    Registrato dal
    Jul 2007
    Messaggi
    204

    [PILLOLA] Upload immagini + resize al volo

    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
    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> 
    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.
    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
    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
                    
    }
                }
            }
        }
    ?>
    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.
    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
    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 (objserverPage){
        
    //Ottiene l'oggetto XMLHttpRequest per poterlo usare.
        
    var theimg;
        
    xmlhttp getxmlhttp ();
        
    xmlhttp.open("GET"serverPage);
        
    xmlhttp.onreadystatechange = function() {
            if (
    xmlhttp.readyState == && xmlhttp.status == 200) {
                
    document.getElementById(obj).innerHTML xmlhttp.responseText;
            }
        }
        
    xmlhttp.send(null);

    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:

    file: showimg.php
    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 ?>&amp;sml=s"]','s'); return false;">Small[/url]
    [url="thumb.php?img=<?= $file ?>&amp;sml=m"]','m'); return false;">Medium[/url]
    [url="thumb.php?img=<?= $file ?>&amp;sml=l"]','l'); return false;">Large[/url]
    </p>
    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:

    file: thumb.php
    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$src0000,
                
    $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?>&amp;sml=s"]','s'); return false;">Small[/url]
                [url="thumb.php?img=<?=$img?>&amp;sml=m"]','m'); return false;">Medium[/url]
                [url="thumb.php?img=<?=$img?>&amp;sml=l"]','l'); return false;">Large[/url]
                </p>
                <?php
                
    return;
            }
        }
        echo 
    "No image found.";
    }
    createthumb($_GET['img'], $_GET['sml']);
    ?>
    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:

    file: functions.js
    Codice 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 (theStatustheObj){
        
    obj document.getElementById(theObj);
        if (
    obj){
            
    obj.innerHTML "<div class=\"bold\">" theStatus "</div>";
        }
    }
    function 
    changesize (imgsml){
        
    //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);
        }

    file: style.css
    Codice PHP:
    body {
        
    font-familyverdanaarialhelvetica;
        
    font-size11px;
        
    color#000000;
    }
    iframe {
        
    displaynone;

    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.
    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.

  2. #2
    Utente di HTML.it
    Registrato dal
    Jul 2007
    Messaggi
    204
    Non la prova proprio nessuno?

  3. #3
    Molto interessante... peccato che per me sia un discorso troppo complicato altrimenti l'avrei usata per il problema che mi sta affliggendo!!
    "Quando uno è fatto così, è fatto per la roba"
    G.Verga - "La Roba"

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.