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 f = 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