Foros del Web » Programando para Internet » Javascript »

tutorial previsualizador de imagenes

Estas en el tema de tutorial previsualizador de imagenes en el foro de Javascript en Foros del Web. Muy wenas. Por fin tengo tiempo de postear este minitutorial. Antes de nada decir que el codigo es integramente de CARICATOS, lo unico que he ...
  #1 (permalink)  
Antiguo 24/11/2008, 09:18
 
Fecha de Ingreso: diciembre-2006
Mensajes: 53
Antigüedad: 17 años, 11 meses
Puntos: 0
tutorial previsualizador de imagenes

Muy wenas. Por fin tengo tiempo de postear este minitutorial. Antes de nada decir que el codigo es integramente de CARICATOS, lo unico que he echo yo es simplificarlo a lo mas minimo. Espero que os ayude tanto como a mi:

Empecemos:

El objetivo es crear un pre-visualizador de imagenes en un iframe, sin necesidad de que el programa tenga que subir el archivo a su ubicacion definitiva, sino al directorio tmp.


El siguiente codigo ira en nuestra pagina principal, donde colocaremos el iframe en el que se iran visualizando las imagenes

Código PHP:
<html>
    <
head>
        <
script type="text/javascript">
            function 
ini()    {
                
window.frames.ver.location.href "previsor.php";
            }
            function 
checkear()    {
                function 
no_prever(f) {  //si el archivo seleccionado no es valido saca un alert
                    
alert("El fichero seleccionado no es valido...");
                    
f.value "";
                }
                function 
prever() { //si el archivo seleccionado sí es valido
                    
actionActual f.form.action//guarda los valores iniciales del form
                    
targetActual f.form.target;
                    
f.form.action "previsor.php"//hace que el action del form pase a ser previsor.php
                    
f.form.target "ver";
                    
f.form.submit(); //manda el formulario
                    
f.form.action actionActual;  restaura los valores iniciales del form
                    f
.form.target targetActual;
                }
                var 
document.getElementById('archivo');
                (/.(
gif|jpg|png|ico|bmp)$/i.test(f.value)) ? prever() : no_prever(f);//preguntar si es formato valido o no
            
}
        
</script>
        
    </head>
    <body onload="ini()" >
<form action="receptor.php" method="post" enctype="multipart/form-data">
    <input type="file" name="archivo" id="archivo" onchange="checkear()"/>
</form>

<iframe  src="previsor.php" id="ver" name="ver"></iframe>
    </body>
</html> 
Analicemos el codigo:
-la pagina consta de un input file y de un iframe
cuando cambiamos el valor del input, se activara la funcion checkear. Lo que hace esta funcion es verificar que el archivo que hemos seleccionado sea una imagen. En caso contrario sacara un alert advirtiendonoslo. (function no_prever())

en caso que sea una imagen valida procedera a visualizarla (functio prever())

fijaos que el action inicial del form puede ser cualquiera ya que el script nos lo restablecera despues de previsualizar la imagen

el onload del body sirve para que la primera vez que carguemos la pagina cargue tambien una imagen por defecto en el iframe


El siguiente codigo ira en la pagina donde (previsor.php en mi caso) verificaremos que el archivo seleccionado cumple con todos los requisitos que le pongamos:

Código PHP:
<?php
    session_start
(); //empezamos una sesion
    
$defecto "img/banner_nieve/report.png"//cargamos la imagen por defecto 
    
$Ok = isset($_FILES["archivo"]);
    
    
$url = ($Ok) ? $_FILES["archivo"]["tmp_name"] : $defecto//hacemos que si no nos ha llegado una imagen correcta del formulario anterior nos cargue la de defecto
    
$fichero = ($Ok) ? $_FILES["archivo"]["name"] : $defecto;
    
    
$datos_imagen fread(fopen($url"rb"), filesize($url));
    
$_SESSION["cont"] = $datos_imagen//creamos dos variables de sesion con el contenido y tipo de archivo
    
$_SESSION["tipo"] = "image/gif";
?>
<html >
<head>
<style type="text/css" >
html    {
    height: 100%;

body    { 
    height: 100%; 
    overflow: hidden; 
    background-color: #eeeeee; 
    background-image: url(previendo.php?dato=<?=$fichero
//aqui haremos que la imagen de fondo del iframe sea nuestro archivo seleccionado
//para ello accederemos a la pagina previendo.php pasandole por parametro el nombre de nuestra imagen
    
?>); 
    background-repeat: no-repeat;
    background-position: center center;
}
</style>
</head>
<body>

</body>
</html>


por ultimo el siguiente codigo lo insertaremos en la pagina previendo.php para que usando las variables de sesion poder visualizar la imagen seleccionada:

Código PHP:
<?php
session_start
();
$url = ($_SESSION["cont"] == "") ? fread(fopen("webmaster.gif""rb"), filesize("webmaster.gif")) : $_SESSION["cont"]; //ultimas comprovaciones para verificar que las variables de sesion que nos llegan no estan vacias
$tip = ($_SESSION["tipo"] == "") ? "image/gif" $_SESSION["tipo"];
header("Content-type: $tip");
echo 
$url;
session_destroy();
?>

En teoria tendria que quedar algo asi:
http://zital.no-ip.org/erik/visualiz...heck_form.html


espero haber ayudado aunque sea un poquito y si teneis alguna duda no dudeis en preguntar

un saludo a todos

Última edición por perikobermio; 24/11/2008 a las 09:39
  #2 (permalink)  
Antiguo 24/11/2008, 09:29
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 5 meses
Puntos: 834
Respuesta: tutorial previsualizador de imagenes

Cita:
Empecemos:

El objetivo es crear un pre-visualizador de imagenes en un iframe, sin necesidad de que el programa tenga que subir el archivo en cuestion al servidor
Ojo: el archivo sí sube al servidor (no a su ubicación definitiva sino al directorio tmp). Esto es importante aclararlo, para que se entienda porqué el proceso demora en proporción al peso del archivo subido. Hasta ahora, usando campos tipo file, el único navegador que nos devuelve esa información sin subir el archivo al servidor es Firefox 3.
  #3 (permalink)  
Antiguo 24/11/2008, 09:39
 
Fecha de Ingreso: diciembre-2006
Mensajes: 53
Antigüedad: 17 años, 11 meses
Puntos: 0
Respuesta: tutorial previsualizador de imagenes

ok panino muxa grasias, editado queda ;)
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 18:21.