Módulo G: CARGA Y MOSTRAR ARCHIVO E IMAGENES
Anuncio
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:
Ahora bien para
el trabajo de codificación tomaremos un ejemplo de un programa en cual una
Navegador
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
Archivo fsubir.html
Antes de continuar a explicar el código del anterior formulario fsubir.html debemos aclarar
algunos conceptos
<input onchange="ValidarArchivo(this,3000000,'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’)
Archivo fsubir.html
<meta charset="utf-8"/><!-- determinamos el tipo de codificación a
emplear -->
<script type="text/javascript" src="js/funciones.js"></script><!-llamamos al archivo de funciones para validar el archivo en front-end -->
<form align="center" action="subir.php" method="POST"
ENCTYPE="multipart/form-data"><!-- creamos nuestro formulario y
establecemos la ruta donde se va a procesar nuestro archivo y añadir
ENCTYPE="multipart/form-data" que permite enviar archivos file -->
<p>
<label for="textfield">Identificación Usuario </label><!--etiqueta
informativa de Identificación Usuario -->
<input align="center" type="text" name="id" id="textfield" required
/><!--caja de texto para la identificación de usuario -->
</p>
<p>
<label for="textfield">Nombre Usuario </label><!--etiqueta
informativa de Nombre Usuario -->
<input align="center" type="text" name="nombre_usu" id="textfield"
required /><!--caja de texto para la nombre de usuario -->
</p>
<p>
<label for="textfield">Fotocopia de identificación:</label><!-etiqueta informativa de Fotocopia de identificación -->
<input onchange="ValidarArchivo(this,3000000,'jpg|pdf|txt');"
id="documento" name="documento[]" type="file" multiple="multiple" /><!-input que permite seleccinar archvivos para ser subidos -->
</p>
<p>
<input type="submit" name="submit" id="submit" value="Guardar" ><!-input para enviar el formulario con sus respectivos datos -->
</p>
</form>
Gracias a las funciones de ValidarArchivo de Js validar con el siguiente aviso cualquier
archivo que no corresponda
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=15000000; //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); ?><!-- Enviamos la
consulta de base de datos annterior a base de datos -->
<script type="text/javascript"> //Abrimos
un nuevo script
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> <!--Cerramos el 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); ?> <!-- Enviamos esta información a
la base de datos-->
<table border="2"> <!-- creamos una tabla con borde -->
<tr><!-- creamos una fila -->
<td colspan="4" align="center">Persona</td><!-- creamos una columna
Persona -->
<td colspan="2" align ="center"><a href="fsubir.html">Nuevo</a></td> <!-Creamos una columna y un enlace el cual nos dirige al archivo fsubir.html
-->
</tr><!-- cerramos una fila -->
<tr><!-- creamos una fila -->
<td>Identificación</td><!-- creamos una columna para
Identificación -->
<td>Nombre</td><!-- creamos una columna para Nombre -->
<td>Vista Previa del documento</td><!-- creamos una columna Vista
Previa del documento -->
<td>Descargar documento</td><!-- creamos una columna para
Descargar documento -->
<td>Imagen</td><!-- creamos una columna para Imagen -->
<td>Eliminar</td><!-- creamos una columna para Eliminar -->
</tr><!-- cerramos una fila -->
<?php
while ($row= $consulta ->fetch_Assoc()) { ?> <!--Mientras existan
registros se guardarán en el array $row -->
<tr><!-- creamos una fila -->
<td> <?php echo $row['identificacion']; ?> </td><!-- creamos una columna
para mostrar Identificación -->
<td> <?php echo $row['nombre']; ?> </td><!-- creamos una columna para
mostrar Nombre -->
<td> <a target="_blank" href="<?php echo $row['fotocopia_id'] ; ?>"><?php
echo "Vista Previa" ; ?> </a> </td><!-- Si deseamos visualizar en una
nueva ventana el archivo basta con crear un enlace con la ruta
almacenada en base de datos se sugiere en imagenes y pdf -->
<td> <a href="funciones/funciones.php?documento=<?php echo
$row['fotocopia_id'] ; ?>"><?php echo "Descargar" ; ?></a> </td><!-Si deseamos descargar el archivo enviaremos la ruta del archivo a
descargar a funciones.php quien lo permtirá -->
<td> <img width="200px" heigh="150px" src="<?php echo
$row['fotocopia_id'] ; ?>"/> </td> <!-- Si deseamos una vista previa de
una "IMAGEN" en este formulario basta con colocar en la ruta src de la
etiqueta img la ruta del archivo a mostar -->
<td><a href="funciones/funciones.php?edocumento=<?php echo
$row['fotocopia_id']?>&id=<?php echo $row['identificacion']; ?> ;
">Eliminar</a> </td> <!-- Para eliminar el registro y el archivo de
nuestro servidor enviaremos mediante un enlace al archivo de funciones la
ruta del archivo y la id de la persona-->
</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
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
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.)
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.
http://php.net/manual/es/function.unlink.php
http://php.net/manual/es/features.file-upload.post-method.php
http://www.w3schools.com/tags/att_input_multiple.asp
