Foros del Web » Programando para Internet » Javascript »

Cambiar aspecto de mostrar imagenes con javascript

Estas en el tema de Cambiar aspecto de mostrar imagenes con javascript en el foro de Javascript en Foros del Web. Hola estoy haciendo un formulario para subir imagenes, y me gustaria que cuando se seleccionen las fotos las muestre (cosa que hace), el unico problema ...
  #1 (permalink)  
Antiguo 03/09/2012, 08:16
 
Fecha de Ingreso: agosto-2012
Ubicación: Almeria
Mensajes: 50
Antigüedad: 12 años, 4 meses
Puntos: 0
Cambiar aspecto de mostrar imagenes con javascript

Hola estoy haciendo un formulario para subir imagenes, y me gustaria que cuando se seleccionen las fotos las muestre (cosa que hace), el unico problema es que las muestra todas las imagenes seleccionadas juntas, me gustaria que hiciera aunque sea un espaciado para que se diferencien.

No domino mucho javascript, por lo que no entiendo mucho el codigo, ¿Donde tendria que poner el espaciado? y como


Código PHP:
<script type="text/javascript">
<!--
num=0;
var 
files;
function 
crear(src,name,num) {
  
fi document.getElementById('fiel');
  
contenedor document.createElement('span');
  
contenedor.id 'div'+num;
  
fi.appendChild(contenedor); 
  
  var 
newImage document.createElement("img"); 
  
newImage.src src;
  
newImage.height 75;
  
contenedor.appendChild(newImage);
  
}


function 
handleFileSelect(evt) {
    
document.getElementById('fiel').innerHTML="";
    var 
num=0;
    
files evt.target.files// FileList object

    // Loop through the FileList and render image files as thumbnails.
    
for (var 0ffiles[i]; i++) {
                
      
// Only process image files.
      
if (!f.type.match('image.*')) {
        continue;
      }

      var 
reader = new FileReader();
      
// Closure to capture the file information.
      
      
reader.onload = (function(theFile){
          return function(
e){
              
crear(e.target.result,theFile.name,num);
              
num++;
              };
        })(
f);

      
// Read in the image file as a data URL.
      
reader.readAsDataURL(f);
    }
  }

--> 
function 
loading(){
    
document.getElementById('files').addEventListener('change'handleFileSelectfalse);
}
</script> 
  #2 (permalink)  
Antiguo 03/09/2012, 09:32
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 16 años, 6 meses
Puntos: 220
Respuesta: Cambiar aspecto de mostrar imagenes con javascript

podrias ponerlo cada vez que creas la imagen agrega esta linea

newImage.style.paddingRight = '10px';
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #3 (permalink)  
Antiguo 03/09/2012, 09:42
 
Fecha de Ingreso: agosto-2012
Ubicación: Almeria
Mensajes: 50
Antigüedad: 12 años, 4 meses
Puntos: 0
Respuesta: Cambiar aspecto de mostrar imagenes con javascript

Muchisimas gracias, era lo que estaba buscando, le he añadido newImage.style.paddingTop = '10px'; para que deje el margen arriba.

Se queda perfecto, esto me pasa por no saber mucho javascript y el no entender mucho el codigo.

Asi por encima me podrias decir que es lo que hace la funcion crear?

De todas las maneras muchisimas gracias.
  #4 (permalink)  
Antiguo 03/09/2012, 09:56
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 16 años, 6 meses
Puntos: 220
Respuesta: Cambiar aspecto de mostrar imagenes con javascript

mmm

Bueno lo que esta realizando el código crear es lo siguiente

- Busca el contenedor principal que supongo que se llama fiel
- Crea un elemento de tipo span que sera el contenedor de las imagenes
- Agrega el span creado al contenedor principal
- Crea la imagen y le asigna ancho, alto y estilos
- Agrega la imagen creada al contenedor creada anteriormente span
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #5 (permalink)  
Antiguo 03/09/2012, 17:57
 
Fecha de Ingreso: agosto-2012
Ubicación: Almeria
Mensajes: 50
Antigüedad: 12 años, 4 meses
Puntos: 0
Respuesta: Cambiar aspecto de mostrar imagenes con javascript

Muchas gracias por la explicacion y por la ayuda de antes.

Etiquetas: aspecto, formulario, html, imagenes, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:55.