Anteprima foto da menu a tendina

[luigi777]

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:

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

Puoi provare con una piccola funzione javascript:

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

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

e crei un elemento dove mostrerai l'iimagine :

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

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

 

[luigi777]

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:

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

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]

ma non lo recuperi già quel valore?

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

cosi hai già provato?

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

 

[luigi777]

ma non lo recuperi già quel valore?

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

cosi hai già provato?

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]

buona Domenica :fonzie:

 

[luigi777]

autoselezionamento...

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

 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]

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

puoi spiegare il problema nel dettaglio? non ho capito bene

 

[luigi777]

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]

Forse ho capito

puoi fare cosi:

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

Forse ho capito

puoi fare cosi:

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