Guardar Imágenes en MySQL con PHP

Ya es común que en un sitio web trabajemos con Graficos (JPG, PNG, GIF… etc). Cuando desarrollamos una página estática solo basta con almacenar las imágenes en carpetas dentro de nuestro host y mandarlas a llamar desde nuestro archivo html o css según se requiera.
Lo mismo se hace cuando se trabaja con sitios dinámicos (lenguaje de servidor y Bases de datos) y queremos que según el contenido las imágenes cambien, lo más aconsejable en estos casos es que con un script php copiemos la imagen en alguna carpeta de nuestro host y en la base de datos solo guardemos la ruta de la imagen junto con una referencia al contenido en donde deba aparecer.
Trabajando con las imágenes como se mencionaba anteriormente nos resultara algo laborioso al querer realizar una acción con ellas por ejemplo si queremos eliminarla tendríamos primero que Eliminar la imagen del disco, y al mismo tiempo buscar su ubicación en la base de datos y eliminar el registro. A simple vista esto no parece nada complicado, pero el problema surge cuando se está desarrollando una aplicación algo extensa; digo extensa en el ámbito de que contenga mucha ingeniería de desarrollo en donde cada objeto del sistema deba estar completamente referenciado.
Para evitar todo este trabajo, la imagen puede almacenarse en la base de datos MySQL, esto en si puede restarle un poquito de velocidad al sistema, pero a cambio de eso aumentas la seguridad y la factibilidad del sistema ya que las imágenes estarán mejor ligadas a sus registros y de esta manera reduces la probabilidad de crear errores de relación Imágenes -> Registros.

A continuación les muestro un ejemplo de como se pueden Guardar Imágenes en MySQL con php, cabe mencionar que este es un proceso básico y a partir de aquí pueden mejorarlo a como ustedes deseen.

1. Comenzamos por crear nuestra base de datos:

2.Creamos un archivo de extensión .php con el nombre conexión.php este será nuestro script de conexión desde nuestro servidor apache a nuestro servidor MySQL.

3. 3. A continuación creamos un archivo php con el nombre upload.php, este script subirá la imagen a la base de datos:

4. 4. Creamos un archivo php con el nombre index.php, como su nombre lo indica este archivo será la página principal de nuestra aplicación y contendrá el formulario para subir la imagen al servidor.

Es importante la parte donde iniciamos el formulario, observese que a diferencia de otros formularios este contiene la propiedad enctype=”multipart/form-data, esta propiedad es indispensable cuando se van a subir archivos al servidor, ya que crea la forma que permite explorar en su búsqueda el equipo local.


Ya tenemos todo listo para poder subir nuestras imágenes al servidor, hasta aquí todo debe funcionar perfectamente. Pero… ¿Cómo puedo visualizar los archivos que ya se subieron? Para eso hacemos lo siguiente:

5. Primero creamos un archivo php con el nombre ver-img.php, este archivo recibirá por parámetro GET, una variable de nombre id con el valor del id de la imagen que queremos visualizar. Posteriormente realizara una consulta y extraerá de la base de datos la extensión de la imagen y su información binaria.
Lo que extraemos de la base de datos es la cadena en formato string que almacenamos en el archivo upload.php, para indicarle al navegador que esta información se tiene mostrar como una imagen se modifica la cabecera de la información con la función de php header(“Content-type:$mime”), en el cual indicamos el mime del archivo. Dicho mime lo calculamos mediante la función fObtenerMime($wfParamCadena), en la cual le mandamos como parámetro la extensión del registro almacenado en la base de datos.

6. Por ultimo solo necesitamos mostrar una lista con los archivos en nuestro index.php insertando otra tabla utilizando el siguiente código. Creamos un elace hacia la la página ver-imagen.php con el id de la imagen a mostrar.

7. Al final nuestro archivo index.php quedara de la siguiente manera.

Y de esta manera podemos subir cualquier tipo de archivos a MySQL no necesariamente imágenes, ya posteriormente are otra entrada en donde veremos cómo forzar la descarga sin visualizar el archivo.
Espero que les sea de utilidad y cualquier duda y/o comentario pueden hacerlo en la parte de abajo libremente.

Codigo Fuente

Guardar-Imágenes-en-MySQL-con-PHP

 

Angel Gutierrez Monola

Developer Boy Amante de la tecnología. Apasionado del Béisbol⚾ Fundador de http://Gumonet.com Emprendedor por Pasión Y Lector por distracción.

You may also like...

19 Responses

  1. Ismael Carrillo dice:

    No soy humano, esta bueno lord chombo un saludo.

  2. luis dice:

    hola, tengo una consulta quisiera que me orientes. Tengo que hacer una aplicación que me permita insertar una imagen en una base de datos hasta alli todo va bien, pero al momento de querer hacer un reporte por ejemplo, si la imagen que inserte en la base de datos es grande en tamaño y otra imagen es pequeña cuando hago mi reporte me salen ambas imagenes pero con su tamaño original y eso no se ve bien porque una es grande y otra pequeña cuando ambas deberían ser del mismo tamaño. Por favor como puedo hacer para que al momento de mostrar esas imagenes se muestren segun el tamaño que le de.
    Gracias de antemano.

    ya el codigo esta listo ya puedo insertar y me devuelve la foto, pero como hago para q me la muestra con una dimension mas pequeña por ejemplo, q el usuario la envie y la resolucion original sea 600*700px y al seleccionarla de la base de datos para mostrarla en la web en dicha division sea de 100*100px..

    • Hola Amigo Luis.
      Que tal. Ante de todo, gracias por visitar y leer mi post, y una disculpa, cre que ya tenia un mail tuyo y no habia tenido tiempo de responder.

      Respondiento a tu pregunta:
      Si utilizaste el codigo que se muestra en este post, para poder mostar la imagen del tamaño que quieras basta con crear una etiqueta imagen y ponerle como direccion de la imagen la dirección del script en donde muestras la imagen. de la siguiente manera.

      < img src="ver-img.php?id=” whit=”100″ heigt=”100″ />

      Ojala y te sirva.
      Un saludo.

  3. Francisco dice:

    Buen Dia: Angel
    Estaba leyendo tu post y tengo una duda sobre el almacenamiento de imagenes en binario en la BD y el almacenamiento de la imagen en un directorio y solo la ruta en la BD. Tengo una pagina que muestra productos, cada producto esta asociado con una o mas imagenes (mostrando una por defecto), mi problema esta cuando se muestran varios productos en la pagina, algunos se corren dejando espacios en blanco, podria deberse a como almaceno las imagenes, ya que uso el segundo metodo o que podria provocar el desfase (uso php y mysql).

    Gracias

  4. diana dice:

    hola
    espero y me puedan ayudar quiero subir las imagenes por medio de jquery, porsupuesto utilizando los archivos que dejas en el blog, pero no se como hacer las llamadas mediante el jquery, ya que no me perimite serializar el formuliario, alguien que me pueda ayudar porfavor, este es el codigo que uso:

    Archivo:

    $(function(){
    $(‘#btn_upload’).on(‘click’,function(){
    var serialize = $(‘#form1’).serialize();
    alert(serialize);
    //$.post(‘editor/upload.php’,{serialize},function(data){alert(data);});
    })
    })

    espero su ayuda…

  5. diana dice:

    hola
    espero y me puedan ayudar quiero subir las imagenes por medio de jquery, porsupuesto utilizando los archivos que dejas en el blog, pero no se como hacer las llamadas mediante el jquery, ya que no me perimite serializar el formuliario, alguien que me pueda ayudar porfavor, este es el codigo que uso:

    Archivo:

    $(function(){
    $(‘#btn_upload’).on(‘click’,function(){
    var serialize = $(‘#form1’).serialize();
    //alert(serialize);
    $.post(‘editor/upload.php’,{serialize},function(data){alert(data);});
    })

    })

    espero su ayuda…

  6. diana dice:

    hola Angel..
    Gracias por el link que me enviate, pero lamento informarte que no me funciono, yo necesito almacenar las iamgenes en una base de datos en lugar de una carpeta, y lo que se me ocurrio es acoplar las funciones para enviar los datos del input a los archivos que en este blog publicas pero para iniciar el formData no me funciona por que no obtengo valor y por lo tanto no puedo enviar la variable…

  7. mario dice:

    Buen día.
    Muy buen trabajo y aporte, bien explicado solo tengo una duda, ¿porque el formulario no regresa al index? y solo se queda en la pagina de upload, ¿como se podría hacer para que regresara?
    Muchas gracias y enserio que buen aporte

    • Hi mario. Muchas gracias por tomarte el tiempo de leer, y gracias por tu comentario.
      Para resolver tu inconveniente en el archivo upload despues de la linea que dice “mysqli_close($con);//cerramos la conexión”, agrega lo siguiente.
      header(‘Location:index.php’)

      Espero te funcione. Saludos.

  8. Hann dice:

    Hola Angel, muy interesante y explicado tu ejercicio, estoy investigando desde hace días como almacenar y mostrar imágenes en una base de datos y la verdad es que no he tenido mucho éxito en eso, solo he podido almacenar, pero mostrar no, por eso descargue tu código y el de almacenar funciona pero… no me muestra la imagen, también tengo una duda, se supone que no es aconsejable almacenar directo las imágenes en la base de datos y que solo guardar la dirección, claro que como tu explicas, eso seria opcional dependiendo del proyecto, pero …podrías explicar ¿como seria mostrarlas y almacenar utilizando la ruta?, y también porque este ejercicio no muestra las imágenes? .
    Agradezco que compartas tus conocimientos :D!

  9. Antonio dice:

    Angel buen dia, me funciono .. excepto dos cosas.
    Me podes ayudar??
    Primero el ** header(‘Location:index.php’) ** me dice error
    Y despues cuando quiero VER la imagen me dice que no existe el url.
    Espero que me puedas ayudar.
    Te comento estoy usando phpmyadmin wampserver
    Gracias

  10. Antonio dice:

    Angel, tendras algun ejemplo de guardar la ruta de la imagen para no generar una base de datos con la imagen dentro. Gracias

  11. Hann dice:

    hola Angel, solo para avisar que tu código me funciono a la perfección, tenia mi código un error en la redirección, por eso no mostraba, solo que si me interesaría que explicaras ¿cómo hacer el almacenamiento de la ruta? para mejorar la eficacia de la base de datos en caso de almacenar un gran número de imágenes.
    Gracias!

  12. JOHAN OSORIO dice:

    BUENOS DIAS, MUCHAS GRACIAS PÒR EL TUTORIAL ME SIRVIO MUCHO PARA IMPLEMENTARLO EN UN PROYECTO DE MENSAJERIA Y ENVIO DE PAQUETES, GRACIAS.

  1. 19 mayo, 2014

    […] días realice un tutorial sobre como subir un archivo a una Base de Datos utilizando PHP, como lo describí anteriormente solo podemos subir un archivo a la vez. ¿Pero que sucede cuando […]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *