Un método sencillo y eficaz para previsualizar una imagen elegida en un inputfile.
He leído por ahí varios métodos para previsualizar una imagen seleccionada desde un campo file.Algunos apoyados en librerías y otros a puro código pero ni todos funcionan en todos los navegadores(los principales).Aunque previsualizar una imagen parezca sencillo no es así dado que por cuestiones de seguridad solamente se pueden mostrar las imágenes que están en la red.
A mi personalmente me vino bien uno que me encontré después de tanto googlear y que es bastante mas extenso en cuanto a sus funciones de lo que yo precisaba en su momento (solamente previsualizar una imagen en el formulario antes de subirla al servidor)así que hize lo mas saludable y que siempre recomiendo: estudié el código,jugué y modifiqué y lo arruiné(la copia por supuesto) y volví sobre mis pasos hasta que lo hube comprendido para poder, entonces, adaptarlo a mis propósitos.
La mecánica es así:
Empezamos por insertar un frame en el lugar donde queremos que se cargue la imagen que elija el usuario. Porque ese será el "target" que se actualizará y la mostrará.
Un "script" para cachear que la extensión del archivo seleccionado sea de una imagen y otro que en caso de que no lo sea limpie el campo file.
<script type="text/javascript">
// La función que limpia el campo file
// en caso que no sea correcto
function clear() {
f = document.getElementById("archivo");
nuevoFile = document.createElement("input");
nuevoFile.id = f.id;
nuevoFile.type = "file";
nuevoFile.name = "archivo";
nuevoFile.value = "";
nuevoFile.onchange = f.onchange;
nodoPadre = f.parentNode;
nodoSiguiente = f.nextSibling;
nodoPadre.removeChild(f);
(nodoSiguiente == null) ? nodoPadre.appendChild(nuevoFile):
nodoPadre.insertBefore(nuevoFile, nodoSiguiente);
}
// La función que hace el chequeo de la extensión del file.
function checkar(f) {
// Si el formato no se corresponde con una imagen
function no_ver() {
alert("El archivo seleccionado no es un archivo de imagen");
// Llamamos a la función que limpia el campo file
clear();
}
// Si se trata de una imagen
// Definimos el destino del form y el target
function si_ver() {
actionActual = f.form.action;
targetActual = f.form.target;
f.form.action = "ver_imagen.php";
f.form.target = "ver";
f.form.submit();
f.form.action = actionActual;
f.form.target = targetActual;
}
(/\.(gif|jpg|png|ico|bmp)$/i.test(f.value)) ? si_ver() : no_ver();
}
</script>
Hasta acá es todo lo que podemos hacer del lado del cliente,
de aquí en adelante todo se ejecuta en el servidor (php mediante).
El archivo prepare.php
(este es el que se carga en el frame)
<?php
session_start();
$def = "white.gif";
$Ok = isset($_FILES["archivo"]);
$url = ($Ok) ? $_FILES["archivo"]["tmp_name"] : $def;
$imagen = fread(fopen($url, "rb"), filesize($url));
$_SESSION["cont"] = $imagen;
?>
<html >
<head>
<style type="text/css" >
html {
height: 100%;
}
body {
height: 100%;
overflow: hidden;
margin-left: 0px;
margin-top: 0px;
}
</style>
</head>
<body>
<img width="200" height="170" border="0" src="viendo.php?dato=<?=$url;?>"/>
</body>
</html>
Y el archivo viendo.php
(Que le manda la imagen al prepare.php)
<?php
session_start();
$url = ($_SESSION["cont"] == "")? fread(fopen("white.gif","rb"),filesize("white.gif")): $_SESSION["cont"];
echo $url;
session_destroy();
?>
(Se puede hacer sin este último pero yo no me preocupé en ver cómo)
Y este es el html donde está el form.
<html>
<head>
<title>Previsualizar Imagen</title>
//Acá los scripts para checar el file
</head>
<body bgcolor="8faf9f">
<iframe src="prepare.php" id="ver" name="ver" style="display: block; margin: auto; border-width: 2px; width: 200px; height: 170px;">
</iframe>
<center>
<form action="" method="post" enctype="multipart/form-data" name="formu" style="margin: auto; text-align: center;">
<br>
<input type="file" name="archivo" id="archivo" onchange="checkear(this)" style="width:200px"/>
</form>
</center>
</body>
</html>
Ojo! No se olviden que tiene que haber un archivo de imagen (que en este ejemplo es white.gif) que es el que se carga por defecto.
Bueno, esta es la forma. Sencilla de verdad y sin rebusque.
Personalmente, lo mas prolijo que encontré. Y aunque la redacción de este "tuto" es de mi pluma, el mérito del código base no.
Así que del mismo modo que lo compartieron conmigo yo lo paso a quien lo quiera aprender.
Ahora, una vez comprendido el código pueden retocarlo y adaptarlo a vuestra necesidad.
Espero que les sea de utilidad y en ese caso no vendría mal un pequeño comentario.
En algún momento veré de poner a disposición el proyecto con los archivos.
No hay comentarios:
Publicar un comentario