Subir y visualizar imágenes con php y MySQL en 4 pasos




Fuente:  http://www.formacionwebonline.com/guia-para-subir-y-visualizar-imagenes-con-php-y-mysql/


Vamos a explicar cómo subir una imagen mediante un formulario a nuestro servidor, antes de subirlo veremos algunas restricciones a tener en cuenta antes de guardar la imagen en el servidor como que no sea mayor a un tamaño o controlar el formato de las imágenes aceptando solo las que nos interese, como por ejemplo jpg o png.
Al subir la imagen guardaremos en la base de datos la ruta en la que esta almacenada la imagen para posteriormente visualizarla.
El contexto del ejemplo se tratará de una imagen para el perfil de un usuario.
Nuestro caso práctico se va a desarrollar en dos archivos:
  • paginaperfil.php
  • cambiodatospersonales.php

1- Cargar imagen a través del formulario

  • Archivo: paginaperfil.php
En el primer paso vamos a crear el formulario, a través de este formulario podremos seleccionar la imagen que deseemos para posteriormente subirla.
El formulario deberá contener:
Ruta del archivo donde realizaremos el proceso de guardado de la ruta de la imagen entre otras cosas, para ello se declara de la siguiente manera: action=”cambiodatospersonales.php”
Incluir enctype=”multipart/form-data” para que nos deje subir la imagen al servidor.

Nuestro campo de subida del archivo debe ser del tipo type=”file”


<form action="cambiodatospersonales.php" enctype="multipart/form-data" method="post">
  <label for="imagen">Imagen:</label> 
  <input id="imagen" name="imagen" size="30" type="file" />
  <input type="submit" value="Cambiar datos" />
</form>

2- Subir imagen al servidor

  • Archivo: cambiodatospersonales.php
// Recibo los datos de la imagen
$nombre_img = $_FILES['imagen']['name'];
$tipo = $_FILES['imagen']['type'];
$tamano = $_FILES['imagen']['size'];
 
//Si existe imagen y tiene un tamaño correcto
if (($nombre_img == !NULL) && ($_FILES['imagen']['size'] <= 200000)) 
{
   //indicamos los formatos que permitimos subir a nuestro servidor
   if (($_FILES["imagen"]["type"] == "image/gif")
   || ($_FILES["imagen"]["type"] == "image/jpeg")
   || ($_FILES["imagen"]["type"] == "image/jpg")
   || ($_FILES["imagen"]["type"] == "image/png"))
   {
      // Ruta donde se guardarán las imágenes que subamos
      $directorio = $_SERVER['DOCUMENT_ROOT'].'/intranet/uploads/';
      // Muevo la imagen desde el directorio temporal a nuestra ruta indicada anteriormente
      move_uploaded_file($_FILES['imagen']['tmp_name'],$directorio.$nombre_img);
    } 
    else 
    {
       //si no cumple con el formato
       echo "No se puede subir una imagen con ese formato ";
    }
} 
else 
{
   //si existe la variable pero se pasa del tamaño permitido
   if($nombre_img == !NULL) echo "La imagen es demasiado grande "; 
}

3- Guardar ruta en la base de datos

  • Archivo: cambiodatospersonales.php
Ejecutamos nuestra sentencia SQL donde su función es actualizar el campo de nuestra tabla “ruta_imagen” con el nombre de nuestra imagen almacenada en nuestro servidor, por lo tanto el objetivo final es guardarnos la ruta de la imagen, en nuestro caso sería el nombre de la imagen subida.

/* en pasos anteriores deberíamos tener una conexión abierta a nuestra base de 
datos para ejecutar nuestra sentencia SQL */
 
/* con la siguiente sentencia le asignamos a nuestro campo de la tabla ruta_imagen 
el nombre de nuestra imagen */
 
$sql = "UPDATE usuarios SET ruta_imagen = '$nombre_img' ";
$result = mysql_query($sql);
 
/* volvemos a la página principal para cargar la imagen que hemos subido */
header("Location: paginaperfil.php");

4- Leer ruta almacenada en la base de datos y visualizar imagen

  • Archivo: paginaperfil.php
En este último paso leeremos el nombre de la imagen almacenada en la base de datos y la cargaremos para verla en nuestra página Web.

/* lanzamos la consulta para traernos el nombre de la imagen, en nuestro caso 
el campo ruta_imagen se encuentra en la tabla usuarios */ 
$result = mysql_query("SELECT * FROM usuarios "); 
while ($row=mysql_fetch_array($result)) 
{ 
    /*almacenamos el nombre de la ruta en la variable $ruta_img*/ 
    $ruta_img = $row["ruta_imagen"]; 
}

Ahora solo nos queda mediante HTML visualizar la imagen.
Imprimimos el nombre de la imagen del usuario, como hemos guardado las imágenes en la carpeta uploads únicamente para tener la ruta completa necesitamos el nombre de la imagen, que lo conseguiremos gracias a la variable $ruta_img
 
<div>
   <img src="/intranet/uploads/<?php echo $ruta_img; ?>" alt="" />
</div>

Comentarios

Publicar un comentario