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

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