Anteprima foto da menu a tendina

luigi777 · 6 Mag 2012

Salve, volevo sapere se c'è la possibilità di fare l'anteprima della foto tramite un menu a tendina.
Mi serve per fare che l'utente che prima inserisca la foto può vedere la foto senza abbandonare la pagina.

prima faccio selezionare la categoria da un altro menu a tendina ed dopo esploro la cartella con questo codice tramite l'evento js con onchange:

PHP:

<tr>
    <td>Seleziona Foto</td>
    
    <td>
        <?php
		$images = array();
        if (isset($_GET['cat'])) {
           
            $pieces = explode('|', addslashes($_GET['cat']));

            $dir = "../public/media/photo/".$pieces[1]."/img_thumb/";

            if (is_dir($dir) && is_readable($dir)) {
                $files = glob("{$dir}/*");

                foreach ($files as $fname) {
                    if (
                        $fname == '.' ||
                        $fname == '..' ||
                        $fname == basename($_SERVER['PHP_SELF'])
                    ) {
                        continue;
                    }

                    if (is_dir($fname)) {
                        $images[basename($fname)] = "(Dir) {$fname}";
                    }
                    else {
                        $images[basename($fname)] = $fname;
                    }
                }
            }
        }

        echo "<select name=\"strFile\">\n";
        
        foreach ($images as $display_name => $fname) {
            ?><option value="<?php echo $display_name; ?>"<?php if($display_name=="".$strFile."") echo 'selected'?> ><?php echo $display_name; ?></option>
        <?php
		}
        
        echo "</select>\n";
        ?>
    </td>
</tr>

in poche parole vorrei fare una finestra dove l'utente vede la foto..

come posso fare?

grazie mille.

criric · 6 Mag 2012

Puoi provare con una piccola funzione javascript:

Codice:

<script type="text/javascript">
    function mostraFoto(foto) {
        
        var image = "<img src='../public/media/photo/" + foto + "' alt='image'/>";
        
        document.getElementById('mostraImmagine').innerHTML = image;
    }
</script>

la richiami con onchange in questo modo:

PHP:

echo "<select name=\"strFile\" onchange=\"mostraFoto(this.options[this.selectedIndex].value)\">\n";

e crei un elemento dove mostrerai l'iimagine :

HTML:

<span id="mostraImmagine"></span>

Dovrai dare al value delle option quello che manca dell'indirizzo per trovare la foto

luigi777 · 6 Mag 2012

ok, ho fatto delle prove e ci siamo...
solo che io recupero cosi e nella barra degli indirizzi ho questo:
index.php?m=foto&action=aggiungi&cat=2|i_fiori_del_mio_giardino

questa: i_fiori_del_mio_giardino è il nome della cartella..

mi dici come posso far passare il valore essendo che ho fatto cosi:

Codice:

<script type="text/javascript">
    function mostraFoto(dir,foto) {
        
        var image = "<img src='../public/media/photo/" + dir + "/img_thumb/" + foto + "' alt='image'/>";
        
        document.getElementById('mostraImmagine').innerHTML = image;
    }
</script>

qua come posso fare autocamente perché ora lo inserito manualmente io:

PHP:

echo "<select name=\"strFile\" onchange=\"mostraFoto('i_fiori_del_mio_giardino', this.options[this.selectedIndex].value)\">\n";

mi dici come fare e ti ringrazio molto.

buona domenica.

criric · 6 Mag 2012

ma non lo recuperi già quel valore?

PHP:

$pieces = explode('|', addslashes($_GET['cat']));

cosi hai già provato?

PHP:

echo "<select name=\"strFile\" onchange=\"mostraFoto($pieces[1], this.options[this.selectedIndex].value)\">\n";

luigi777 · 6 Mag 2012

criric ha scritto:
ma non lo recuperi già quel valore?

PHP:

$pieces = explode('|', addslashes($_GET['cat']));

cosi hai già provato?

PHP:

echo "<select name=\"strFile\" onchange=\"mostraFoto($pieces[1], this.options[this.selectedIndex].value)\">\n";

ha ha.. funziona alla grande e sono io che sono fuso,
ti ringrazio molto se ho altro problema mi faccio vivo..

ciao e buona domenica.

criric · 6 Mag 2012

buona Domenica :fonzie:

luigi777 · 6 Mag 2012

autoselezionamento...

ciao, volevo dirti si come che io uso cosi il codice che mi hai scritto prima:

PHP:

 echo "<select name=\"strFile\" onchange=\"mostraFoto('$pieces[1]', this.options[this.selectedIndex].value)\">\n";

però ho un problemino... nella form di inserimento dati .. va benissimo..e fa il suo dovere..

ma quella della modifica .. non mi fa l'auto selezionamento..
come posso fare?

Io pensavo ad un if else all'istruzione mostrafoto() poi non lo so .. perché io di javascript non so nulla e lo devo imparare.

ti ringrazio molto
e spero se mi riesce ad risolvere questo piccolo problemino..

grazie mille di nuovo.

criric · 6 Mag 2012

ma quella della modifica .. non mi fa l'auto selezionamento..

puoi spiegare il problema nel dettaglio? non ho capito bene

luigi777 · 7 Mag 2012

criric ha scritto:
puoi spiegare il problema nel dettaglio? non ho capito bene

vorrei che mi appaia da sola senza che io scelga di nuovo la foto..

io ho il campo r_strFile= $row["strfile"]

ma come posso metterlo in quella funzione?

e poi dopo posso far che l'utente può cambiare la foto quando vuole..

non so come posso spiegarti perché non conosco la cosa..

in poche parole che quando io clicco su modifica mi appaia la foto autocamente.

boo..

vedi se mi capisci .

ti ringrazio molto e buon lunedì.

criric · 7 Mag 2012

Forse ho capito

puoi fare cosi:

PHP:

            <span id="mostraImmagine">
            <?php
            // se è settato e non è vuoto
            if (isset($strFile) && !empty($strFile)) {
                // mostri l'immagine con il suo percorso
                echo "<img src='../percorso/" . $strFile . "' alt='image'/>";
            }
            ?>
            </span>

Se hai già l'immagine in memoria la mostri nell'elemento

luigi777 · 7 Mag 2012

criric ha scritto:

Forse ho capito

puoi fare cosi:

PHP:

            <span id="mostraImmagine">
            <?php
            // se è settato e non è vuoto
            if (isset($strFile) && !empty($strFile)) {
                // mostri l'immagine con il suo percorso
                echo "<img src='../percorso/" . $strFile . "' alt='image'/>";
            }
            ?>
            </span>

Se hai già l'immagine in memoria la mostri nell'elemento

ok.. ha funzionato alla grande..
ti ringrazio molto.

ciao e buona giornata.

Anteprima foto da menu a tendina

luigi777

Utente Attivo

criric

Super Moderatore

luigi777

Utente Attivo

criric

Super Moderatore

luigi777

Utente Attivo

criric

Super Moderatore

luigi777

Utente Attivo

criric

Super Moderatore

luigi777

Utente Attivo

criric

Super Moderatore

luigi777

Utente Attivo

Discussioni simili

Anteprima foto da menu a tendina

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Discussioni simili

Privacy & Transparency

Privacy & Transparency