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

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>

Iván Martínez

Ingeniero Informático apasionado por el mundo del desarrollo WEB. Me gusta caminar por este mundo lleno de tecnologías y día a día aprender cosas nuevas como el doctor Frankenstein ¡dadme cosas para experimentar!

38 comentarios sobre “Subir y visualizar imágenes con php y MySQL en 4 pasos

  • el May 21, 2016 a las 9:07 am
    Permalink

    Gracias amigo, me sacaste de una que ufff, gracias 😀

    Respuesta
  • el Ago 20, 2016 a las 5:56 am
    Permalink

    Iván que bueno el tuto! Mil gracias!
    Ahora, como podria guardar varias imagenes que sean del mismo producto por ejemplo ?

    Respuesta
    • el Ago 27, 2016 a las 7:08 pm
      Permalink

      Exactamente no se a que te refieres con tu pregunta pero por cada imagen que desees subir tendrás que crear en el formulario un input para subir la imagen.

      Saludos!

      Respuesta
      • el Oct 21, 2016 a las 8:30 am
        Permalink

        no necesariamente es crear un input puedes manejar una atributo llamado multiple y te permite subir varias imagenes desde un mismo input lo manejas con arreglos

        Respuesta
    • el Ago 27, 2016 a las 7:01 pm
      Permalink

      Lo siento, en este ejercicio no existe demo. Saludos!

      Respuesta
  • el Ago 31, 2016 a las 11:46 pm
    Permalink

    disculpa cual seria la base de datos?

    Respuesta
  • el Sep 4, 2016 a las 2:19 am
    Permalink

    Gracias Ivan, si supieras el tiempo que he estado por lograr esto y por fin! Gracias

    Respuesta
  • el Sep 17, 2016 a las 7:46 pm
    Permalink

    Hola Ivan , se puede subir la imagen y solo mostrarla en el html , que no se guarde? , cual seria el procedimiento?

    Respuesta
    • el Sep 18, 2016 a las 1:41 pm
      Permalink

      Hola, si quieres hacerlo de forma sencilla deberás usar PHP y HTML y si quieres hacerlo de forma avanzada ya debes meterle algo de javascript pero te digo la forma sencilla.

      La idea es subir la imagen a una carpeta temporal de tu servidor, después obtienes la ruta temporal del archivo y la muestras, de esta manera conseguirás mostrar la imagen sin tener que guardarte la ruta en tu base de datos, después ya sea porque este en la carpeta temporal o en una carpeta propia tuya se deberán hacer las correspondientes tareas de limpieza.

      Saludos.

      Respuesta
      • el Abr 27, 2017 a las 5:09 am
        Permalink

        oye yo voy en bachillerato y me dejaron hacer eso, con php y con html sin bases de datos, que muestre la imagen, pero no tengo idea de como hacerlo, utilice esto echo “”; pero no me la muestra y cuando escribo para obtener el nombre el tipo y el tamaño de la imagen si se puede, ¿que tengo que hacer?

        Respuesta
  • el Ene 19, 2017 a las 9:52 pm
    Permalink

    Buenas tardes Ivan, viendo la dedicacion que tiene al explicar el caso, me gustaria una orientacion en torno a un proyecto que quiero hacer en el cual muestro a unas personas una serie de fotografias de delincuentes ya sea por sectores o por bandas y si reconoce a alguien, pueda obtener la informacion que tengo en db.

    Respuesta
  • el Abr 23, 2017 a las 11:49 am
    Permalink

    Hola Iván, gracias por la aportación,

    Una pregunta: Cómo puedo evitar fotografías con el mismo nombre? Es decir al subir al servidor la foto, consultar en la base de datos si el nombre ya existe y avisar al usuario?

    Gracias por anticipado

    Respuesta
    • el Abr 27, 2017 a las 1:56 pm
      Permalink

      Hola Juanjo, si una manera de hacerlo es cuando se va a subir una imagen al servidor comprobar si el nombre ya existe mediante una SELECT, en el caso que exista conquetenar el nombre del archivo subido con un número generado de forma aleatoria, por ejemplo de 5 cifras (http://php.net/manual/es/function.rand.php).

      También esta bien tu propuesta, de avisar al usuario con un mensaje y que él de forma manual ponga otro nombre.

      Saludos.

      Respuesta
  • el May 22, 2017 a las 9:37 pm
    Permalink

    Hola Iván muchas gracias por el post.
    Disculpa, quisiera saber si tienes algún tutorial o guía que pueda ayudarme a saber cómo puedo subir otra imagen distinta una vez que ya haya subido otra y eliminar la anterior del servidor. ¿se puede borrar archivos del servidor con php? Yo sé que si quiero cambiar la ruta de la imagen que se guarda en la tabla solo lo hago mediante una consulta con UPDATE, pero desearía eliminar el archivo anterior del servidor.
    De verdad agradecería muchísimo si pudieras responder a mi duda…

    Respuesta
  • el Jul 14, 2017 a las 3:18 am
    Permalink

    Amigo no me funciona, me guarda el nombrede la imagen pero no la imagen

    Respuesta
    • el Jul 21, 2017 a las 8:43 am
      Permalink

      Comprueba si existe la imagen en el servidor.

      Respuesta
  • el Jul 19, 2017 a las 2:32 am
    Permalink

    Hola ivan, gracias por el tutorial, me funciono, me movió la imagen a la ruta pero no me actualizo la tabla en db :/

    Respuesta
    • el Jul 21, 2017 a las 8:44 am
      Permalink

      Comprueba si se está realizando bien el UPDATE. Saludos.

      Respuesta
  • el Ago 25, 2017 a las 12:54 am
    Permalink

    una pregunta tengo una bd con una tabla estudiantes y los campos son id, nombre, apellido, grado, foto hasta esta todo bien, tengo un crud y funciona, pero como hago para subir una foto para cada estudiante y poder visualizar la foto junto al resto de datos de esa tabla..

    Respuesta
    • el Sep 18, 2017 a las 5:35 pm
      Permalink

      En este artículo te lo explica, por cada estudiante te guardas la ruta de la imagen en tu campo foto, la foto la almacenas en el servidor. Cuando accedas al espacio personal de un estudiante cargas la imagen de ese estudiante y la visualizas. Saludos.

      Respuesta
  • el Sep 7, 2017 a las 8:21 pm
    Permalink

    gracias por el aporte colega!! muy bueno!

    Respuesta
  • el Oct 26, 2017 a las 5:45 pm
    Permalink

    Muchas gracias por el dato, me sirvio de mucho, saludos!!

    Respuesta
  • el Nov 9, 2017 a las 4:51 pm
    Permalink

    Muchísimas gracias, mejor explicado no se puede. Felicidades!

    Respuesta
  • el Dic 5, 2017 a las 7:17 pm
    Permalink

    HOLA ESTOY HACIENDO UN MODULO PARA RECURSOS HUMANOS, ME HICISTES UN GRAN APORTE GRACIAS.

    Respuesta
  • el Feb 10, 2018 a las 9:45 pm
    Permalink

    buenas, a mi no me carga en la carpeta, pero el nombre del archivo si se carga en la base de datos

    Respuesta
  • el Mar 9, 2018 a las 1:23 am
    Permalink

    Buenas tardes, disculpa la pregunta es que tipo de Dato debe ser “ruta_imagen” en la Tabla de la Base de datos usuarios ?
    Muchas gracias por el aporte.

    Respuesta
    • el Mar 14, 2018 a las 1:27 pm
      Permalink

      Hola, tienes que crear el campo como un “string” ya que únicamente vas a guardar la ruta donde está almacenado tu archivo.

      Un saludo.

      Respuesta
  • el Mar 21, 2018 a las 11:44 pm
    Permalink

    Excelente aporte, tengo una duda si yo quiero cambiarle el nombre al archivo por uno que yo necesite ejemplo una identificación como lo sería?

    Muchas Gracias

    Respuesta
    • el Mar 22, 2018 a las 4:24 pm
      Permalink

      Hola, el nombre del archivo lo tienes almacenado en la base de datos, por lo tanto al realizar la sentencia SQL:
      $sql = “UPDATE usuarios SET ruta_imagen = ‘$nombre_img’ “;

      Le indicas el nombre que deseas al subir la imagen, si le deseas cambiar el nombre una vez ya subida la imagen pues debes de hacer otro UPDATE sobre la base de datos modificándolo.

      Saludos.

      Respuesta
  • el Abr 20, 2018 a las 6:07 am
    Permalink

    hola, una pregunta con que tipo de dato tienes el campo foto en la base de dato?
    gracias

    Respuesta
    • el Abr 20, 2018 a las 11:40 am
      Permalink

      El tipo es “string”, recuerda que lo que vas a guardar en ese campo no es la imagen en sí, sino únicamente la ruta o nombre de la imagen que está almacenada en tu servidor.
      Saludos.

      Respuesta
  • el May 5, 2018 a las 1:18 am
    Permalink

    Buenas noches amigo, soy nuevo en programacion y estoy realizando un sistema administrativo de RRHH en Yii; sin embargo me ha surgido un problema del cual llevo dias tratando de resolver y no he podido; tengo una tabla “Funcionario” en la que almaceno los datos filiatorios e incliyendo su foto; ahora bien, el campo foto lo declare como TEXT en la BD a fin de almacenar la ruta; use en el controlador:

    public function actionCreate()
    {
    $model=new Funcionarios;
    // Uncomment the following line if AJAX validation is needed
    // $this->performAjaxValidation($model);

    if(isset($_POST[‘Funcionarios’]))
    {
    $model->attributes=$_POST[‘Funcionarios’];
    $model->foto=CUploadedFile::getInstance($model,’image’);
    if($model->save())
    $model->foto->saveAs(Yii::app()->basePath .’//fotos/’.$model->id.’.jpg’);
    $this->redirect(array(‘view’,’id’=>$model->id));
    }
    $this->render(‘create’,array(
    ‘model’=>$model,
    ));
    }
    En el Formulario:
    beginWidget(‘CActiveForm’, array(
    ‘id’=>’funcionarios-form’,
    ‘htmlOptions’=>array(‘enctype’=>’multipart/form-data’),
    // Please note: When you enable ajax validation, make sure the corresponding
    // controller action is handling ajax validation correctly.
    // There is a call to performAjaxValidation() commented in generated controller code.
    // See class documentation of CActiveForm for details on this.
    ‘enableAjaxValidation’=>false,
    )); ?>
    ….
    ….

    labelEx($model,’Foto’); ?>

    y efectivamente me guarda la ruta en la BD y en una carpera que cree en el proyecto me guarda la foto perfectamente; el problema es que no quiero que en la vista admin de funcionarios me muestre la foto relacionada a cada funcionarios y no he podido, este es la vista del admin:

    widget(‘zii.widgets.grid.CGridView’, array(
    ‘id’=>’funcionarios-grid’,
    ‘dataProvider’=>$model->search(),
    ‘filter’=>$model,
    ‘columns’=>array(
    array(
    ‘header’=>’N°’,
    ‘value’=>’$data->id’,
    ),
    array(
    ‘header’=>’Nombres’,
    ‘name’=>’nombre1’,
    ‘value’=>’$data->nombre1′,
    ),
    //’nombre2’,
    array(
    ‘header’=>’Apellido’,
    ‘name’=>’apellido1’,
    ‘value’=>’$data->apellido1’,
    ),
    array(
    ‘header’=>’Foto’,
    ‘name’=>’image’,
    ‘value’=>CHtml::image(Yii::app()->basePath.’/protected/fotos/’.$model->image,’image’,array(‘width’=>200)),
    ),
    array(
    ‘class’=>’CButtonColumn’,
    ),
    ),
    )); ?>

    Les agradeceria grandemente me ayudara…¡¡¡

    Respuesta
    • el May 5, 2018 a las 1:43 am
      Permalink

      CORRECCIÓN, quise decir, que el problema es que QUIERO que en la vista admin de funcionarios me muestre la foto relacionada a cada funcionarios y no he podido,

      Respuesta

Deja un comentario

Tu dirección de correo electrónico no será publicada.