entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Como cargar imagenes en un select desde un directorio

Hola Comunidad, seguro les parecerá sencillo pero bueno aun no he entrado mucho en javascript, necesito cargar ya sea atravez de php o javascript en un select de html una lista con el siguiente Formato [img=filie]+[file-extencion] y en value el file, lo cual seria la lista de seleccion de un país que se carga desde una carpeta banderas donde existen varios ficheros de tipo imagenes que son la imagen de la bandera y de nombre de fichero el nombre del pais a la cual corresponde.
Si alguien pudiera ayudarme muchas gracias
para cargar las imagenes use este codigo:

<?php  
$dir = 'banderas/'; 
if(@$handle = opendir($dir)) { 
     echo '<form action="" method="" name="">'; 
     echo '<b>Selecciona una Bandera:</b><br>'; 
     echo '<select>'; 
     while (false !== ($file = readdir($handle))) { 
        if ($file != '.' && $file != '..') { 
            echo '<option>'.$file.'</option>';
        } 
     } 
     echo'</select> <input type="button" name="boton" value="Enviar"> </form>'; 
 closedir($handle); 
}else { 
 echo 'ERROR: No se ha localizado el directorio $dir'; 
} 
?>

0voto

Leonardo-Tadei comentado

Hola Dairón,

no comprendo del todo qué es lo que querés obtener como resultado final. Podrías poner manualmente un select como lo que querés obtener o una imagen del select desplegado que te gustaría ver?

2 Respuestas

3votos

dairon Puntos17120

Hola Amigos, ya resolví mi problema de cargar las banderas de los paises desde una carpeta. utilicé javascript+php+css y como cargaba los nombres de los paises desde ficheros les quite la extencion php y me quedo listo para uzar.
Aquí les p[ongo el código que hice y un printscreen de como me quedó, Saludos:

<?php  
/**
 * @author Dairon Pérez Frías 
 */ 
echo '<body onload="cimagenes()">';
$dir = 'banderas/'; 
if(@$handle = opendir($dir)) {      
     echo '<b>Selecciona una Bandera:</b><br>'; 
     echo '<select id="banderas" onchange="seleccionada()" onkeyup="seleccionada()" >'; 
     $n = 'http://localhost/a/banderas/';
     while (false !== ($file = readdir($handle))) { 
        if ($file != '.' && $file != '..') { 
            echo '<option value="'.$file.'">'.substr($file, 0, -4).'</option> ';
        } 
     } 
     echo'</select>';       
 closedir($handle); 
}else { 
 echo 'ERROR: No se ha localizado el directorio $dir'; 
}?> 
<script type="text/javascript">
function cimagenes(){   
   for (var i = document.getElementById("banderas").length - 1; i >= 0; i--) {
       document.getElementById("banderas").options[i].style.background = 
       'url("'+'http://localhost/a/banderas/'+document.getElementById("banderas").options[i].value+'") no-repeat right';       
   };
}
function seleccionada(){
    document.getElementById("banderas").style.background = 'url("'+'http://localhost/a/banderas/'+document.getElementById("banderas").options[document.getElementById("banderas").selectedIndex].value+'") no-repeat 90%';    
}
</script>
</body>

enter image description here

0voto

Leonardo-Tadei comentado

Gracias por compartir la solución!

PD: no sería más eficiente que el script PHP genere un estilo inline para cada option poniendo la imagen de fondo en vez de llamar a la función que recorre el select y se los agrega después???

0voto

dairon comentado

si, sería realmente mucho más eficiente pero abría que dejar de todas formas el metodo seleccionada() en onchange y en onkeyup para que la seleccion cargue la imagén. voy a probar a ver como quedaría.

0voto

dairon comentado

Hola leonardo-tadei, gracias por la sujerencia ya lo implementé como me sujeriste y el código me quedó de la siguiente forma:

<?php  
/**
 * @author Dairon Pérez Frías 
 */ 
echo '<body onload="cimagenes()">';
$dir = 'banderas/'; 
if(@$handle = opendir($dir)) {      
     echo '<b>Selecciona una Bandera:</b><br>'; 
     echo '<select id="banderas" onchange="seleccionada()" onkeyup="seleccionada()" >';      
     while (false !== ($file = readdir($handle))) { 
        if ($file != '.' && $file != '..') { 
            echo '<option style="background: url(&quot;http://localhost/a/banderas/'.$file.'&quot;) no-repeat scroll right center transparent;" value="'.$file.'">'.substr($file, 0, -4).'</option> ';
        } 
     } 
     echo'</select>';       
 closedir($handle); 
}else { 
 echo 'ERROR: No se ha localizado el directorio $dir'; 
}?> 
<script type="text/javascript">
function seleccionada(){
    document.getElementById("banderas").style.background = 'url("'+'http://localhost/a/banderas/'+document.getElementById("banderas").options[document.getElementById("banderas").selectedIndex].value+'") no-repeat 90%';    
}
</script>
</body>

0voto

Leonardo-Tadei comentado

Hola Dairon,

me alegra que te haya servido la sugerencia. Tal y como decís, la función seleccionada() sigue haciendo falta, pero te ahorrás todo un bucle en JS.

Un detalle más: pone las imágenes usando URL relativas, ya que de otra forma cuando pongas esto en un servidor web, tendrías que ajsutar las rutas para que siga funcionadno.

Saludos cordiales!

0voto

dairon comentado

claro mano yo estoy programando con Code Igniter pero estos ejemplos que nececito los hago fuera del proyecto para facilitarme la vida, gracias por todo

0voto

juansolo comentado

Si puedes usar en tu proyecto código de terceros, te recomiendo que mires el plugin de JQuery (Select2). Te permite hacer lo que querías y te ofrece otras funcionalides que pueden resultar interesante para tu proyecto.

0voto

dairon comentado

Gracias mano, realmente en estos momentos estoy buscando libros y he visto varios videos de JQuery realmente esta buenisimo y luego de aprender JQuery voy para AngularJS pienso que ya con eso pueda terminar mi proyecto con un buen nivel

0voto

Leonardo-Tadei comentado

Un matiz,

primero y más importante, sí hay que usar frameworks y herramientas que faciliten nuestro trabajo.

El matiz, el pero, es que a veces soportar el peso de todo un framework para hacer una tarea más o menos trivial que se resuelve muy bien con unas pocas líneas de JS, como es el caso de esta implementación, de ninguna manera justifica su uso.

Nadie se compraría un camión para ir al almacén a buscar 1 litro de leche... y aunque el camión sea gratis, habría que sacar la licencia para manejarlo y practicar un poco antes de salir por primera vez a la calle. Esta burda analogía es justamente la "curva de aprendizaje" de la que siempre se habla y es la contra para adoptar algunas tecnologías... al menos cuando la tarea es tan trivia que el uso del framework consume mas recursos (humanos, de disco y de CPU) que no usarlo.

Los frameworks son geniales! Solo hay que saber cuando usarlos y cuando no.

Saludos!

0voto

Villanuevand comentado

Epa Dairon!
Se que todavía no tienes el nivel de JS que deseas, pero recuerda, que no es recomendable colocar código JS, dentro del HTML. Esto también por cuestiones de seguridad, haz de este consejo un hábito para que te formes como un desarrollador con buenas practicas... Yo te recomiendo que crees un archivo JS aparte y ahi coloques todo tu código,

Debes saber que puedes hacer "listeners" que estén atentos a cualquier evento a disparar. o simplemente usando el window.onload... acá puedes conseguir mas información sobre lo que te comento =>

Javascript No Obstructivo - aNIeto2K
Window.onload - Mozilla MDN
addEventListener - Mozilla MDN

Si necesitas un poco más de ayuda pues, no dudes en escribirme.
Ojalá te sea útil esta información.

0voto

Leonardo-Tadei comentado

Hola @Villanuevand !

Cuál sería la cuestión de seguridad a la que hacés referencia?

Salvo que ofusques el código para difucultar la lectura, siempre será accesible, ya que el navegador necesita accederlo para poderlo interpretar...

0voto

Villanuevand comentado

Tienes absoluta razón, el código siempre será accesible para que el navegador pueda renderizarlos...
Pues FÉ DE ERRATA! para mi comentario.

Gracias @Leonardo-Tadei siempre tan acertado.
Una gran saludo.

2votos

Gugami Puntos180

No me familiarizo mucho con PHP, pero creo que ésto puede funcionar.

Así sería la carga de imágenes en el select:

while ($file = readdir($dir)) {
    if ($file != "." && $file != "..") {
        echo "<option value=$file>$file</option>";
    }
}

Y podrías hacer una vista previa con JavaScript:

function showimage() {
    if (!document.images) {
        var form = document.forms[0];
        return form.img.src='avatares/' +form.select.options[form.select.selectedIndex].value;
    }
} 

Obviamente tendrías que crear un elemento 'img' en el formulario para la vista previa de la bandera seleccionada. Saludos.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta