jueves, 13 de enero de 2011

PHP: Previsualizar imagenes antes de subirlas al servidor

Supongamos que tenemos un formulario para subir archivos, que ése archivo es la imagen de nuestro perfil y que queremos ver como queda antes de subir la imagen y guardar nuestro perfil.

Para realizar esta tarea php no va a ir solo, va a estar acompañado por un javascript y un iframe para que esto resulte. pero es más facil de lo que parece. Mi amigo GON me facilitó este código que fuimos adaptando para nuestro trabajo. Veamos los pasos para este ejemplo:


-----------------------------------------------------------------------------------------------------
Si querés los archivos fuete, acá te dejo un link para descargarte los archivos del ejemplo funcionando ok.
-----------------------------------------------------------------------------------------------------


1) Para llevar a cabo este ejemplo vamos a crear en la raíz de nuestro servidor una carpeta llamada "tmp", dos archivos .php llamados "form.php" y "uploader.php" y una imagen genérica llamada "avatar.png" que hará de comodin (puede ser cualquier extensión de imagen).
En la carpeta "tmp" se iran guardando las vistas previas de las imagenes que cargaremos en nuestro escritorio.

2) Archivo "form.php":

  • En el header pondremos un script de javascript:
    <script type="text/javascript"> function setpreview() <!-- creamos la función -->
     { document.form1.target='null'; <!-- seteamos el target del formulario en null para que se ejecute dentro del iframe llamado "null"-->
     document.form1.action='uploader.php'; <!-- seteamos la acción del formulario hacia nuestro archivo "uploader.php" -->
     document.form1.submit(); <!-- hacemos el envío de información sin salir de la pantalla del formulario -->
     }
    function setsubmit()
    <!-- Creamos la función para que el action del formulario vuelva a ser el archivo que procesa los datos -->
    {  document.form1.target='_self'; <!-- le decimos que se ejecute en el lugar de la página actual -->
     document.form1.action='archivo_que_procesa_tu_form'; <!-- aquí ponemos redefinimos el action del formulario para que se dirija al archivo que ejecuta los datos del form -->
    document.form1.submit();  <!-- enviamos la información -->
    } </script>
  • En el body: pondremos el formulario:
    <form name="form1" action=" " method="post" enctype="multipart/form-data"><!-- El nombre del formulario es el mismo al que llamamos en la funcion javascript, en "action" ponemos el archivo donde irá el formulario una vez completado, pero para este ejemplo no nos importa. No te olvides del "enctype" fundamental para subir archivos -->
    <div>Personalizar tu imagen: </div> <!-- este div es solo para poner una leyenda, no es necesario para que funcione bien el script -->
    <div><input name="archivo" id="archivo" type="file" size="35" onChange="setpreview()"/></div> <!-- campo de archivo donde seleccionamos la imagen de nuestra pc. Aquí le decimos que cuando nuestro campo cambia (onChange) ejecute el código del javascript sin esperar a apretar el boton "submit" del formulario-->
    <div><img src="avatar.png" id="picture" alt="vista previa" height="70" width="70"/> </div> <!-- En este div mostraremos, inicialmente la imagen "avatar.png" pero que, al seleccionar un nuevo archivo en el campo anterior-->
    <div><input type="submit" value="Crear Usuario" onclick="setsubmit()"/></div><!--Cuando presionamos el botón llamamos a la función que devuelve el destino original del action hacia el archivo que procesa los datos del formulario -->
    </form>
  • También en el body: Escribimos el iframe donde se ejecutará "uploader.php" esto es lo que nos permite ver el preview sin actualizar la página del script.
    <iframe src="about:blank" name="null" style="display:none"> :
3) en el archivo "uploader.php":
<?php
$carpeta="tmp/"; //indicamos la carpeta donde se guardará la vista previa
$name=$carpeta.basename($_FILES['archivo']['name']); //armamos la ruta del archivo subido en formato "tmp/nombredearchivo.png"
 move_uploaded_file($_FILES['archivo']['tmp_name'],$name); //guardamos el archivo en la carpeta
?>

<script type="text/javascript">

 parent.document.getElementById('picture').src='<?php echo $name; ?>'; <!-- Le decimos mediante javascript que, busque el id "picture" (campo que tiene la imagen "avatar" y en su lugar muestre lo que acabamos de subir -->
</script>

4) Cuando crees la función para el botón "enviar" del formulario, en algún lado deberías incluír la sentencia para que se borre, mediante php, la imagen que habíamos subido antes a la carpeta tmp. Algo así como:
<?php
unlink:(tmp/'.$_FILES['archivo']['tmp_name']');
?>


-----------------------------------------------------------------------------------------------------
Nota: Si este artículo te pareció interesante, por favor, visitá los enlaces patrocinados donde seguramente encontrarás más cosas útiles.

11 comentarios:

Miguel C. de Castro Miguel dijo...

me gustaría saber como puedes crear la función del boton enviar despues de tener listo el formulario, pues no soy capaz, si que ceo la preview de la imagen pero cuando le doy a enviar no hace nada...

Chabat dijo...

Como este ejemplo es sólo para previsualizar imagenes omití la funcion js para hacer el submit. La función que devuelve al action del formulario la ruta del archivo que procese los datos del form.

Ahora lo agregué en el post. Revisá el ejemplo y si queres descargalo de nuevo que tiene la función "setsubmit()" incluída.

NOTA: El archivo .php para procesar el form no lo he incluído porque de eso sí hay muchisimo en la red.
Saludos.

Anónimo dijo...

Hola...Tengo hecho un formulario que posee un tabedpannels, entonces cuando agrego el archivo me desconfigura todo, le saqué el iframe... pero sin eso no funciona la previsualización.. sabes que podría hacer?

Chabat dijo...

hola "Anónimo". Gracias por visitar mi blog.
Nunca usé los "tabedpannels", pero por lo que sé se basan en css.
Asegurate estar respetando los nombres de id y clases y de que no se repitan.
Saludos y despues contame como te fué.

Anónimo dijo...

¿de que modo se puede comprobar que lo que te meten es un archivo de imagen valido y no cualquier documento?

Chabat dijo...

bueno...
Antes que nada, gracias por visitar mi blog.
En cuanto a tu consulta, puedes obtener la extensión del archivo creando una variable del estilo:"$ext = strrchr($_FILES['archivo']['name'],'.');" y luego lo validas contra tipos de extensiones comunes. Si se valida, corres todo el proceso.

Todo pasa por una razon dijo...

Php es el lenguaje de programación mas empleado en la web. Muchas gracias por el post.

Saludos,


Patricia Mallas

Chabat dijo...

Gracias a vos patricia por visitar mi blog. Espero que te haya sido útil.

Anónimo dijo...

Muy bueno el post,me gustaria como insertar este codigo en una tabla de html,es q lo necesito para poner unas fotos e imprimirlo,lo que pasa es q inserto asi el codigo y me cambia la estructura de la tabla del html

Anónimo dijo...

Hola, he probado el ejemplo y la primera vez que selecciono un archivo lo previsualiza, pero si vuelvo a elegir otro archivo, continua mostrando la misma imagen que antes.
Agradeceria una solucion.
Gracias, Jose

Unknown dijo...

Muchísimas gracias lo intente hacer yo mismo hace unos dos meses y llegue a algo presido aunque por supuesto con defectos xd y podía pre visualizar y todo asta la carpeta temp pero me gustaría ponerle un nombre asignado por mi a cada una de las imagenes para asociarlas fácilmente a un usuario en especifico y agregar un control para que si pre visualizo una y cargo otra la anterior pre visualización se borre

si me puedes ayudar estaría agradecido mi correo es cazador767@hotmail.com de antemano infinitas gracias

El portal que comparte sus ingresos