Módulo G: CARGA Y MOSTRAR ARCHIVO E IMAGENES

Transcripción

1 Módulo G: CARGA Y MOSTRAR ARCHIVO E IMAGENES Objetivo del Módulo: Contribuir con la administración de archivos de usuario en servidor En muchas ocasiones es necesario que en nuestros aplicativos se permita adjuntar archivos en diversos formatos (imagen, pdf, documento de texto, etc.) para ser administrados y presentados en nuestro programa. Existen muchas formas de almacenar y procesar este tipo de información en el lenguaje de programación PHP, una de ellas es guardar el archivo en base de datos; pero en criterio de muchos miembros de la comunidad del desarrollo web es que esta es una forma no muy eficiente, ya que obtendremos una base de datos pesada y con ello un aplicativo más lento. Por este motivo en este módulo presentaremos una alternativa en la cual guardaremos y gestionaremos estos archivos en una carpeta del aplicativo y en un campo de base de datos solo guardaremos la ruta donde se guardó el archivo dentro de nuestro aplicativo para posteriormente buscar, mostrar o descargar el archivo en base a esa ruta Ejemplo:

2 Ahora bien para Navegador el trabajo de codificación tomaremos un ejemplo de un programa en cual una persona puede registrar sus datos personales y adjuntar la fotocopia de identificación y podrá realizarlo en formato pdf o imagen (Nota: Es recomendable en caso de permitir adjuntar documentación, esta se realice en formato pdf) Base de datos a utilizar En una carpeta subirhst tendremos un archivo index.php en el cual visualizaremos la siguiente interfaz Al realizar clic en el enlace de Nuevo pasaremos a visualizar el siguiente formulario el cual tiene adicionales a dos cajas de texto para la identificación y el nombre, un input de tipo file el cual permitirá al usuario subir su archivo al aplicativo

3 Archivo fsubir.html Antes de continuar a explicar el código del anterior formulario fsubir.html debemos aclarar algunos conceptos <input onchange="validararchivo(this, ,'jpg pdf txt');" id="documento" name="documento[]" type="file" multiple="multiple" /> Es importante mencionar que si dejamos el atributo multiple="multiple" nos permitirá seleccionar y subir más de un archivo, en caso que solo deseemos admitir subir un solo archivo debemos quitarlo. Con el fin de optimizar el proceso de subida de uno o varios archivos, al nombre del input deberemos añadir corchetes al finalizar el nombre del campo name="documento[]" Para validar el ingreso de archivos con formato o tamaño no permitido, emplearemos en el evento onchange una función de JavaScript previamente preparada la cual encontraremos en el archivo funciones,js contenido en la carpeta js con los siguientes parámetros. ValidarArchivo (this,tamaño máximo en bytes, formatopermitido1 formatopermitido 2 )

4 Archivo fsubir.html <meta charset="utf-8"/> <script type="text/javascript" src="js/funciones.js"></script> <form align="center" action="subir.php" method="post" ENCTYPE="multipart/form-data"> <p> <label for="textfield">identificación Usuario </label> <input align="center" type="text" name="id" id="textfield" required /> </p> <p> <label for="textfield">nombre Usuario </label> <input align="center" type="text" name="nombre_usu" id="textfield" required /> </p> <p> <label for="textfield">fotocopia de identificación:</label> <input onchange="validararchivo(this, ,'jpg pdf txt');" id="documento" name="documento[]" type="file" multiple="multiple" /> </p> <p> <input type="submit" name="submit" id="submit" value="guardar" > </p> </form> Gracias a las funciones de ValidarArchivo de Js validar con el siguiente aviso cualquier archivo que no corresponda

5 En caso de ingresar los datos correctamente, nuestro proceso pasará al archivo subir.php el cual recibirá el o los archivos y con el fin de garantizar en el back-end la seguridad validaremos el formato y el tamaño máximo de un archivo nuevamente y guardaremos la información correspondientes en base de datos como lo observaremos en el siguiente código. Archivo subir.php <?php $tamaño_maximo= ; //Determinamos el tamaño maximo en bytes permitido del archivo $formatos = array("jpg", "pdf", "txt");//determinamos los formatos permitidos $total = count($_files['documento']['name']);// Contamos la cantidad de archivos for($i=0; $i<$total; $i++) {// Recorremos cada archivo $nombre_archivo=$_files['documento']['name'][$i]; //obtenemos el nombre de cada uno de los archivos mediante el tipo de variable $_FILES['nombre_campo_file']['name']['posición'] $ruta_tmp_archivo = $_FILES['documento']['tmp_name'][$i];//Cuando subimos uno o varios archivos se guardan en una ruta temporal la cual Obtendremos la ruta de archivo temporal if ($ruta_tmp_archivo!= ""){ //Nos aseguramos que tengamos una ruta de archivo no sea vacia $extensión_archivo = (pathinfo($nombre_archivo,pathinfo_extension)); //obtenemos la extensión del archivo mediante la función PATHINFO_EXTENSION if (!in_array($extensión_archivo, $formatos)){echo "El formato no es valido"; } //Validamos que el archivo cuente con la extensión permitida if(filesize($_files['documento']['tmp_name'][$i]) > $tamaño_maximo ) {//Validamos que el archivo no cuente un tamaño superior al especificado echo "No se puede subir archivos con tamaño mayor a ".$tamaño_maximo; //Mensaje de advertencia exit(); //Sale del ciclo por no cumplir las condiciones } $ruta_destino = "documento/".$_files['documento']['name'][$i]; //Configuración y guardamos en una variable la ruta donde se guardará el archivo "Carpeta_donde_se_guarda_/NombreParaGuardar" if(move_uploaded_file($ruta_tmp_archivo,$ruta_destino)) { //Movemos el archivo de la ruta temporal a la ruta anterior donde deseamos guardar el archivo require 'conexion.php'; //Llamamos el archivo de conexion $sql='insert into persona (identificacion,nombre,fotocopia_id) VALUES("'.$_POST['id'].'","'.$_POST['nombre_usu'].'","'.$ruta_destino.'") ';//Insertamos la información que ingresó el usuario dentificación,nombre,ruta donde se guardo el archivo,ya que luego la necesitaremos para mostrar o descargar el archivo $insertar=$mysqli->query($sql);?> <script type="text/javascript"> //Abrimos un nuevo script

6 alert('archivos subidos con exito'); //Notificamos a nuestro usuario sobre el exito del proceso window.location = 'index.php'; //Redireccionamos para que el usuario pueda ver la información o donde gustemos </script>  <?php } //Cerramos el if de la lina 16 }//Cerramos el if de la lina 10 }//Cerramos el for de la lina 6 Después de haber haber procesado e ingresado la información nos redirige a nuestro archivo index.php mencionado al inicial de la guía en el cual utilizaremos una consulta de base de datos para presentar la información correspondiente Archivo index.php Archivo index.php <meta charset="utf-8"/>;<! determinamos la codificación --> <?php require 'conexion.php';//llamamos al archivo de conexion $sql = 'select * from persona'; //Realizamos una consulta de la información de la tabla persona $consulta = $mysqli ->query ($sql);?>  <table border="2">  <tr> <td colspan="4" align="center">persona</td> <td colspan="2" align ="center"><a href="fsubir.html">nuevo</a></td>  </tr> <tr> <td>identificación</td>

7 <td>nombre</td> <td>vista Previa del documento</td> <td>descargar documento</td> <td>imagen</td> <td>eliminar</td> </tr> <?php while ($row= $consulta ->fetch_assoc()) {?>  <tr> <td> <?php echo $row['identificacion'];?> </td> <td> <?php echo $row['nombre'];?> </td> <td> <a target="_blank" href="<?php echo $row['fotocopia_id'] ;?>"><?php echo "Vista Previa" ;?> </a> </td> <td> <a href="funciones/funciones.php?documento=<?php echo $row['fotocopia_id'] ;?>"><?php echo "Descargar" ;?></a> </td> <td> <img width="200px" heigh="150px" src="<?php echo $row['fotocopia_id'] ;?>"/> </td>  <td><a href="funciones/funciones.php?edocumento=<?php echo $row['fotocopia_id']?>&id=<?php echo $row['identificacion'];?> ; ">Eliminar</a> </td>  </tr> <?php } //cerramos el while?> </table> Con el fin de optimizar el proceso de descargar y eliminar, empleamos un archivo funciones.php en la carpeta funciones Funciones.php <?php if(isset($_get['documento'])){ //si llega el parametro por GET documento descargar('../'.$_get['documento']); //llamará a la función descargar } if(isset($_get['edocumento'])){ //si llega el parametro edocumento por $_GET eliminar($_get['edocumento']); //llama a la función elimninar } function descargar($archivo){ //creamos la función descargar y recibimos la ruta del archivo $nombre_archivo = (pathinfo($archivo,pathinfo_basename)); //obtenemos el nombre del archivo

8 header('content-disposition: attachment; filename="'.$nombre_archivo.'"'); //preparamos el archivo para ser descargado y le asignamos un nombre readfile($archivo);//leemos y descargamos el archivo }//cerramos función descargar function eliminar($archivo){ //creamos la función eliminar y recibimos la ruta del archivo require '../conexion.php'; //llamamos el archivo conexion.php $sql ='DELETE FROM persona WHERE identificacion ="'.$_GET['id'].'"'; //eliminamos el registro que que contiene el número de identificación correspondiente $consulta = $mysqli->query($sql);//enviamos esa consulta a la base de datos unlink('../'.$archivo); //la función unlink eliimina al archivo unlink(ruta_archivo); header('location:../index.php'); //redireccionamos a visualizar los datos } //cerramos función eliminar?> Como resultado de hacer clic sobre el enlace descargar y ejecutar la función de descargar obtendremos nuestro archivo en el navegador como lo muestra la siguiente imagen Si el archivo que decidimos subir es de tipo pdf al hace clic sobre vista previa en una nueva pestaña obtendremos la siguiente vista

9 Finalmente podemos concluir que La función subir permite subir uno o múltiples archivos La función vista previa es válida para imágenes o pdf La función descargar permite la descarga de cualquier archivo Se recomienda que la documentación se adjunte en formato pdf La función eliminar Unlink borra completamente el archivo del aplicativo. Recomendación Importante: Con el fin de brindar seguridad en su aplicativo NO permita subir archivos con extensión de lenguajes de programación como (php,sql,js,etc.)

10 EJERCICIOS: 1. Teniendo en cuenta la función subir y eliminar crear un formulario en el cual le permita al usuario modificar (remplazar) un archivo que se ha subido por él. Lista de referencias