formulario con php raro xD

[juanjo900]

intento explicar esto para que me entendais

tengo un formulario de html con varios campos para encargar fotos,
para hacerlo bien, tengo puesto varios campos como nombre apellidos etc...
pero hay un campo que es selecciona tu foto, aqui llega el problema, las fotos estan en una carpeta donde hay como 1000 entonces poner option a mano como que no xD
entonces mirando por el foro encontre un codigo php que me saca la ruta de todas las fotos, y funciona de maravilla el problema que tengo que tambien quiero que haga como una vista previa cuando pulsas en una de las rutas que me ha mostrado, pero no soy capaz, creo que me he explicado con claridad pero si no me entendeis intento decirlo de otra forma, dejo aqui el codigo php (que aún no lo he metido en el formulario html porque no tengo ni idea de como hacerlo xDDD)

<?php
echo'<iframe name="myframe" width="500px" height="500px" frameborder="1"></iframe>';
echo'<select size="5">';
$dir='images/phocagallery/carnaval2013/thumbs/';
$images = glob("$dir{*.gif,*.jpg,*.png}", GLOB_BRACE);
foreach($images as $v){
echo '<option value="'.$v.'" onclick="myframe.location.href='.$v.';">'.$v.'</option>';
}
echo'<select>';
?>

Tambien estaría muy bien que los $V que puesto en rojo solo salga el nombre de la foto y no el directorio completo.


si veis que es mucho lio solo quiero que en formulario html en uno de los campos me cargue toda la lista de fotos de la carpeta y me haga una vista previa cuando le pulses a una, y a la vez que luego el submit la envie, quizas exista otro codigo mejor que ese, pero es el que encontre tras mucho buscar.

espero vuestra ayuda, muchas Gracias

[cuasatar]

Hola, la próxima vez si quieres resaltar algo en rojo no me parece malo, pero no pongas el resto en amarillo que nos lias para leerlo.

Para mostrar una vista previa de una imagen creo que la manera mas comoda seria hacerlo de pronto con javascript. Yo crearia un div oculto y con un clic lo haria visible. En ese div con la propiedad style puedes añadirle los estilos css que quieras y en este caso el background image. No se si sea mas facil hacerlo por php pero de momento es lo que se me ocurre. (Creo que tambien se podria hacer con ajax y mezcla de php, igual son ideas)

Tu otro problema no lo entendi muy bien. Suerte con eso.

[juanjo900]

Gracias cuasatar por tu respuesta, pero no es mostrar solo la imagen, seria tambien que cargara la ruta automaticamente de las imagenes de una carpeta

[cuasatar]

A que te refieres con cargar la ruta de una carpeta automaticamente?

Tu puedes guardar la ruta con un function static o con una variable comun y silvestre.

Código PHP:

  $ruta="http://www.midirecion/imagenes";
//o tambien
$ruta=$_SERVER['SERVER_NAME']."/imagenes"; 
   

No se si entendi tu pregunta o no.

Este post te podria servir tambien

http://www.forosdelweb.com/f18/varia...p_host-295909/


Con la especificación de la ruta puedes usar glob si mal no recuerdo para cargar los archivos de esa ruta. Le especificas en el filtro que solo quieres archivos jpg(o png o gif) y listo tal y como lo tienes en tu ejemplo

Igual si no es así lo que necesitas explicate un poco mejor.

[bulter]

LoL pero que le estais contando ....
Primero, los tags <option> no suportan el evento onClick, el tag <select> si lo suporta pero en este caso no seria conveniente. Debería de usar el evento onChange.
Lo de poner un div oculto también es mala idea. Si pones un div oculto, antes de mostrar lo tienes que cambiar su contenido

Código:

var elementId = "divId";
document.getElementById(elementId).style.display = "block";
document.getElementById(elementId).innerHTML = "<img src='....' title='' />";

esto no tiene ningún sentido. La imagen aparecerá de la nada y el user se quedara WTF :D . El DIV tiene que ser visible y lo que hay que cambiar es el src de la imagen

Código:

document.getElementById("ThumbListImageId").src = '....';

Así el usuario sabra que en este Div saldra algo, no cambias el contenido entero del DIV ( lo que en el caso no tiene sentido ) y te salvas 2 linias de codigo:

Código:

var elementId = "divId";
document.getElementById(elementId).style.display = "block";

Así que el código final seria algo así:

Código:

<?php 
$dir='images/phocagallery/carnaval2013/thumbs/'; 
$images = glob("$dir{*.gif,*.jpg,*.png}", GLOB_BRACE); 

echo "<div><img src='' id='ThumbImageId' title='' /></div>";
echo'<select size="5" onChange="document.getElementById(\'ThumbImageId\').src = this.value;">';

foreach($images as $v)
{ 
	echo '<option value="'.$v.'">'.$v.'</option>'; 
} 
echo'<select>';
?>

La segunda pregunta si me he enterado bien es que no quiere que salga la ruta completa en el Option sino solo en nombre, eso se puede hacer asi:

Código:

echo '<option value="'.$v.'">' . substr($v, strripos($v, '/') + 1); . '</option>';

Saludos.

[cuasatar]

La idea que yo platicaba de hacer un div oculto creo que se daba por sobre entendido que era al comienzo de los tiempos. Es a mi parecer obvio que una vez que cambiara el select de las imagenes el div ya se haria visible. Con el planteamiento que muestras creo que ya no es necesario que el div este oculto nunca.

Yo personalmente haria el cambio de un select por una lista y en lugar de manejar el evento onChange lo haria con un MouseOver. Obviamente en este caso tocaria borrar la imagen previamente cargada antes de utilizar la nueva. Igual vuelvo y repito son ideas de guía. En ningún momento se ha dicho que sean la única opción o forma de hacerlo.

juanjo900 si te interesa (si es que todavia sigues el hilo) opciones de galeria con json que me han gustado.

[bulter]

onChange u onClick da lo mismo, es segun el gusto, mi idea era que el evento onClick no se suporta en <option>. Y era contestar a la pregunta, ahora como yo/tu lo haríamos es segun el gusto/conocimientos de la persona. Yo en primer lugar nunca sacaria la lista de las fotos de esta forma ... Hacer un traverser de una carpeta entera con muchos archivos puede causar problemas de rendimiento, asi que lo primero es separar todos los archivos/imagenes en varias sub carpetas con un limite de 1000 o algo asi. Una cosa es leer 100k archivos de ./Img/ y otra es leer 1000 de ./Img/f1/, ganas performance, evitas el bottleneck en caso de muchos usuarios etc. pero claro aqui ya hablamos de ajax. Otra cosa es que en vez de hacer un traverser cada vez a las carpetas, se puede hacer un archivo txt/xml con el contenido de las carpetas ( mmm tipo cache ) y leer las rutas directamente del archivo, si no me equivoco para unos 3000 archivos un traverser tardaría sobre 1.5sec o 2 y leer archivo de texto con 3000 lineas unos 0.002. Juanjo esto si que lo puedes tener en cuenta.
Bueno mi idea es que todos tenemos formas de hacerlo según las necesidades y conocimientos :)

Saludos.

[cuasatar]

Bueno mi idea es que todos tenemos formas de hacerlo según las necesidades y conocimientos :)

Saludos.

Concuerdo plenamente con eso y es lo que hace que estar en un foro tenga tanto valor. Si no aprendieramos de la experiencia de los demás seria como predicar en el desierto. Yo lo veo desde el punto de vista de pocas imagenes y tu lo planteas con muchas imagenes. Si me quedara con mi visión solamente no tomaria en cuenta esos detalles que yo desconozco.

Mucha suerte y gracias por compartir experiencia que nos sirve a todos.

[bulter]

Iniciado por cuasatar

Concuerdo plenamente con eso y es lo que hace que estar en un foro tenga tanto valor. Si no aprendieramos de la experiencia de los demás seria como predicar en el desierto. Yo lo veo desde el punto de vista de pocas imagenes y tu lo planteas con muchas imagenes. Si me quedara con mi visión solamente no tomaria en cuenta esos detalles que yo desconozco.

Mucha suerte y gracias por compartir experiencia que nos sirve a todos.

Lol me alegra de que queda gente pensando asi, ya no lo veia yo mucho :O

Hay una cosa llamada Defensive programming lo que en resumen significa esperar lo inesperado, nunca fiarse al usuario y estar preparado para todos los casos posibles o tal y como dice la ley de Murphy "Si algo puede salir mal, saldrá mal." :D . Mmmm aqui esta explicado [URL="http://es.wikipedia.org/wiki/Programaci%C3%B3n_defensiva"]Programación defensiva[/URL]. En el caso el hace una lista de imagenes que probablemente crecerá, aun que empiece de 5 archivos siempre existe la probabilidad de crecer a 5 000 000 y si se hace bien luego no tienes por que corregirlo/modificar lo. Pero claro, estas cosas requieren mucho mas conocimiento que tendra juanjo y por esto no lo estoy mencionando ni explicando a fondo seria un poco Trash/spam incluso a lo mejor le lio :D

A se me olvido lo iba a decir en el post anterior si glob no devuelve resultado el ciclo foreach dara warning asi que es mejor hacer una comprobación de que $images != null:

Código PHP:

   if($images != null)
{
    foreach($images as $v)
    { 
        echo '<option value="'.$v.'">'.$v.'</option>'; 
    } 
} 
   

o

Código PHP:

  $dir='images/phocagallery/carnaval2013/thumbs/'; 
$images = globFiles("$dir{*.gif,*.jpg,*.png}"); 
 
try
{
    foreach($images as $v)
    { 
        echo '<option value="'.$v.'">'.$v.'</option>'; 
    } 
}
catch(Exception $ex)
{
    echo $ex->getMessage();
}
 
function globFiles($pattern)
{
    if($pattern == null || !is_string($pattern) || $pattern == "" || strlen($pattern) <= 1)
    {
        throw new Exception("The given value for \$pattern is not valid");
    }
    
    $globResult = glob($pattern, GLOB_BRACE); 
    
    if($globResult == null)
    {
        throw new Exception("Glob error. Null results.");
    }
    else
    {
        return $globResult;
    }
} 
   

Saludos. :)

[bulter]

Error. Flood Message