Subir imágenes mediante PHP

Subir imágenes mediante PHP

Fecha: 10-Ene-2010 | Autor: .
Guardado en: Códigos, Tutoriales PHP

Un lector (cesarin) me había sugerido hace algún tiempo, que tratara el tema de “Cómo subir imágenes al servidor y guardar el nombre en una base de datos“, y para ello voy a redactar este breve tutorial sobre Cómo subir imágenes en PHP y guardar el nombre en una BBDD.

Para este mini-manual necesitamos poseer nociones básicas de PHP así como conectar a una BBDD e interactuar con ella.

Para crear nuestro uploader en PHP, necesitaremos 3 cosas:

  • 1 archivo HTML que contenga el formulario que solicitará la imagen.
  • 1 archivo PHP que procesará la subida de la imagen.
  • La base de datos que guardará el nombre de las imágenes que subamos.

El archivo HTML debe contener un formulario con 2 campos un input type=”file” que será el selector de la imagen y un input type=”submit” que será el botón que enviará el formulario. Además debemos tener en cuenta que al enviar imágenes en un formulario debemos agregar enctype=”multipart/form-data” dentro de la tag <form>

Código del archivo formulario.html:

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

El PHP que lo procese hará 3 cosas:


¿Por qué este anuncio?
  1. Recibir los datos de la imagen mediante $_FILES.
  2. Guardará la imagen en la ruta que le indiquemos (el directorio debe tener permisos de escritura [CHMOD 0777]).
  3. Guardar el nombre de la imagen en la BBDD que definamos.

Código para subir la imagen (primera parte de procesar.php):

<?php
 
    // Datos de conexión a configurar
    $user = "usuario_bbdd";
    $pass = "clave_bbdd";
    $bbdd = "nombre_bbdd";
 
    // Ruta donde se guardarán las imágenes
    $directorio = $_SERVER['DOCUMENT_ROOT'].'/uploads/';
 
    // Conecto a la BBDD
    $dbh = mysql_connect("localhost", $user, $pass);
    $db = mysql_select_db($bbdd);
 
    // Recibo los datos de la imagen
    $nombre = $_FILES['imagen']['name'];
    $tipo = $_FILES['imagen']['type'];
    $tamano = $_FILES['imagen']['size'];
 
    // Muevo la imagen desde su ubicación
    // temporal al directorio definitivo
    move_uploaded_file($_FILES['imagen']['tmp_name'],$directorio.$nombre);
 
?>

Ahí ya deberíamos tener nuestra imagen subida en el sitio indicado, ahora debemos guardar la variable $nombre en nuestra base de datos previamente creada. Para este ejemplo usaremos una bbdd que simplemente guardará el valor del nombre de la imagen y un id autonumerico » ID [INT(9)] | nombre_archivo – [VARCHAR(255)].

De modo que agregamos en procesar.php las siguientes líneas:

    // Guardamos en la BBDD
    $sql = "INSERT into TABLAIMAGENES (nombre_archivo) values ('$nombre')";
    $resultado = mysql_query($sql);
 
    // Por si queremos la ID asignada a la imagen
    $id = mysql_insert_id();

Con esto debería bastar para poder guardar nuestras imágenes en una carpeta que decidamos y además guardar la referencia al nombre de archivo en la base de datos.
Luego para mostrar las imágenes simplemente las llamaras por el nombre en la carpeta /uploads/ o cualquier otra que hayas definido en tu caso.

Si tienes cualquier duda, o hay algo que no has entendido, puedes dejar tu comentario consultando, prometo intentar ayudarte ;)


Si te gustó, comparte:
Y si fue de ayuda, puedes comprarme un café:
...ó la cena si quieres! ;)

Etiquetado como: , ,


Gravatar

Marcelo


Desarrollador web, trabajando desde Montevideo, Uruguay para todo el mundo. Me especializo en Diseño web, Maquetación HTML5 & CSS3, jQuery y Programación PHP & MySQL, e intento aprender un poco más cada día.

48 comentarios, participa!

  1. Luis Toscano

    19. Feb, 2010

    actualizemos el $HTTP_POST_FILES por $_FILES ya que el anterior ya ha sido descontinuado y puede ser un fail en tu desarrollo saludos

  2. Marcelo

    19. Feb, 2010

    Gracias Luis, tienes toda la razón, gracias por el comentario, ya procedo a corregirlo en el código del post ;)

    Saludos!

  3. Gerald

    06. May, 2010

    Esto serviria para crear un hosting de imagenes como http://www.tinypic.com o imageshack, photobucket, etc ?

  4. Luis Toscano

    08. May, 2010

    sip con eso y le agregas una que otra mejora y listo

  5. Francisco Machado

    08. Jun, 2010

    Hola Marcelo, muy buena explicación, Me gusto mucho el diseño de la pagina, no te enojes si te copio alguna idea para cuando haga la mia. Saludos y a meter tecla.

  6. Oscar

    10. Jun, 2010

    hola Marcelo:
    quiero comentarte cual es mi problema, un cliente me ha pedido hacer un sitio en el que sus clientes puedan subir fotos datos, telefono etc desde su computadora. Al sitio de mi cliente por medio de un formulario para mostrarlas. No se nada de php, pero necesitaria un script que me pueda ayudar.
    Espero haber sido claro, desde ya muchas gracias

  7. Marcelo

    10. Jun, 2010

    Oscar, todo bien, pero me sorprende que alguien que “no sabe nada de php” (como tu mismo has dicho), acepte un proyecto de desarrollo que incluye (y mucho) PHP…

    Aparte piensa, que si hubiera un script ya hecho, con lo que necesitas… para que te pagarían? o para qué cobrarías si simplemente tomarás algo ya hecho por otra persona y lo pondras en un servidor?

    Francisco, gracias por tus comentarios, y claro que puedes tomar ideas ;) y si algo te es de utilidad se agradece que difundas la web… aunque no es para nada obligación ^_^

  8. joaquin

    30. Sep, 2010

    Primero que nada muy bueno este codigo funciona impecable..

    Mi duda es la siguiente ya que lo eh intentado y no puedo..

    Como hacer para en el mismo formulario agregar otros para ingresar textos y que esten en la misma BD o en diferente, Pero que luego puedas imprimir en pantalla la imagen y los demas textos.

    Espero se entienda.

    Salu2..

  9. leonardo

    21. Oct, 2010

    Hola, que tal, te pregunto, como se puede hacer para subir un archivo “x” ( documento o imagen ) pero que a la ves se muestre en una pagina “x” que ese mismo se pueda descargar por otras personas?, bueno mandame un mail lo antes posible

    estamos en contacto.
    saludos

  10. axl

    23. Oct, 2010

    Puedes completar este buen código????
    Porfavor muestranos como mostrar mediante php las imagenes ya guardadas.
    Muchas gracias

  11. Antonio

    13. Nov, 2010

    Hola,

    Tengo un formulario el cual da opcion para subir 6 imagenes y funciona correctamente, pero tengo dos dudas, si no se agrega ninguna imagen y se envia el formulario, ¿Como puedo hacer para que aparezca en el lugar de la imagen, una por defecto? y la siguiente pregunta. Si subo una imagen, una vez publicada, ¿Como puedo hacer para que cuando el usuario pase el raton sobre la imagen, la imagen se agrande?.

    Un saludo y muchas gracias.

  12. danger_cris

    14. Nov, 2010

    Muy buen aporte gracias me sacaste de un gran apuro

  13. pepe

    06. Dic, 2010

    Muy buenas
    Tengo una duda sobre el codico que aportas, y es que si es seguro para el servidor que el cliente pueda subir imagenes, daria el caso de que cambien la extension a .jpg, .gif..etc para poder subir algo peligroso al servidor, y el codigo de arriba puede prevenir los archivos mal intecionados?

  14. RAy

    09. Mar, 2011

    marcelo para mostrarlas solo debes general una consulta de TABLAIMAGENES , solo mostrar sin procesar su contenid?

  15. Diego

    10. Mar, 2011

    Hola doy de Costa Rica, muchas gracias por el post, me sirvió de mucho…

  16. Marcelo

    30. May, 2011

    Para quienes consultan como mostrar luego las imágenes, bastaría con hacer un SELECT a la tabla TABLAIMAGENES, lo cuál nos daría el nombre de archivo, y luego le concatenaríamos la ruta en la que están guardadas las mismas ;)

  17. Lalo

    15. Jun, 2011

    puedo subir una foto, guargarla en donde se guardan mis archivos php? para ser jalada desde ahi(por ejemplo con el apache) y si es necesario ser usada por un archivo php, por ejemplo para mostrarse en pantalla?

  18. Pedro69

    12. Jul, 2011

    Saludos y gracias por el tutorail, Os vais a reir de mi…. he conseguido todo lo dificil del tutorial y me falta lo mas sencillo.

    He realizado tu tutorial paso por paso y para mi asombro ha funcionado todo muy bien hasta la base de datos…. pues bien, la foto me sale reflejada en la base de datos para mi asombro jajajajaja pero no consigo localizarla fisicamente en ninguna de las carpetas del host. En fin saludos y gracias por todo.

  19. ags88

    28. Jul, 2011

    hola necesito tu ayuda estoy creando un sistema que permita al asuario poder subir imagenes y mostrarlas en pantalla todo eso con php y mysql puedes ayudarme porfavor.

  20. Fabiola

    05. Ago, 2011

    Marcelo este codigo me sirve para luego leer de la base de datos las imagenes guardadas? por que me guarda el nombre , no la ruta, como lo haria para luego mostrar las imagenes guardadas en el servidor leyendo la ruta?

    Gracias!

  21. Yohelvis

    16. Ago, 2011

    Amigo me funcionó de maravilla, sin embargo soy nuevo en esto y me gustaría hacer que también se generara un thumbnail de un ancho y alto especifico, que sería necesario agregar al script para lograrlo?

    Gracias de antemano y felicitaciones.

  22. Anika

    23. Ago, 2011

    Gracias por el aporte!! Me salvaste la vida!! ;)

  23. pablo

    13. Oct, 2011

    Muchas gracias,

    cómo se haría lo que hace miheineken, por ejemplo. Que saliese la imagen en un lugar determinado (dentro de otra)

    Un saludo

  24. Daniel

    15. Oct, 2011

    Estaba buscando esto, si funciono gracias mil gracias.

  25. ricardo gonzalez

    03. Nov, 2011

    excelente valiosisimo aporte

  26. Mateo

    19. Nov, 2011

    Muchísimas gracias, estaba buscando esto!!!!

    Saludos.

  27. Snakex

    28. Ene, 2012

    Excelente aporte, me solucionaste un lio jeje, para Fabiola; para mostrar la imagen en ese u otro formulario sólo tienes que hacer un select y del resultado sacar el nombre del archivo que guardaste en la etiqueta de la imagen pones el resultado del select con la imagen… algo así:
    <img src="Familias/” alt=”” border=”0″>, donde $Imagen es el resultado de tu select con el nombre de la imagen.

  28. LeonardoCM87

    16. Feb, 2012

    Muchas Gracias funciono perfecto con $_FILES, yo usaba $HTTP_POST_FILES y me daba error no sabia que ya estaba descontinuado ya que muchos tutoriales siguen usandolo.

    A mi tambien me salvaste la vida xD… jeje…

    Saludos…

  29. carlos ruiz

    21. Feb, 2012

    MUCHAS GRACIAS !!!
    muy buen aporte y sobre todo bien explicada !!

  30. zpixell

    23. Mar, 2012

    muy bueno….

  31. Cristian Orihuela

    26. Mar, 2012

    Wow, genial tutorial eh, en serio, geneal…

  32. Link

    28. Jul, 2012

    gracias por el aporte me sirvio mucho :D

  33. Jorge

    27. Nov, 2012

    Podrias poner el codigo para mostrar las imagenes en la pagina? Es que lo eh intentado pero no me sale la imagen. /:

  34. mweper

    06. Ene, 2013

    Marcelo: Tengo el siguiente problema.
    Las imágenes se suben exitosamente, pero cuando quiero mostrarlas en un , dentro del SRC me aparece «Array» en vez de la URL de la imagen.

    ¿Por que puede ser? Desde ya muchas gracias..

  35. Marcelo

    06. Ene, 2013

    No se cómo generas el array, pero prueba con algo como $nombredelarray[0] o si fuera el caso $nombredelarray[‘valor_que_pides’][0] ;)

  36. mweper

    07. Ene, 2013

    Marcelo, ya resolví el problema.

    En el SQL «VALUES()», había puesto que ingrese $imagen, en vez de $nombre.

  37. Venser

    14. Feb, 2013

    Hola hola que buena explicación, pero y si quiero poner un tamaño máximo y archivos específicos.
    digamos que solo acepte pdf y jpg

  38. gustavo tavo

    08. Abr, 2013

    este es un buen sitio gracias por el codigo me ha servido

  39. Aaron

    14. Abr, 2013

    WOW! Muy buen tutorial, rápido y conciso, me gusto y me sirvió de mucho.

    Como dato, no se si sea muy necesario, pero php.net quiere matar las sentencias de mysql normales porque no tienen soporte de php, lo único que hacen es agregarle una i al final de mysql, sería como mysqli_query…

    Solo como comentario pues, pero en verdad fue el mejor tutorial que encontré al respecto

    aqui te dejo los links de php.net

    http://php.net/manual/es/function.mysql-query.php
    http://www.php.net/manual/es/book.mysqli.php

    Gracias por todo

  40. Christian Manuel

    19. May, 2013

    Muchas gracias! tu código me funcionó muy bien =)

  41. Luciano Muratore

    03. Jul, 2013

    Muy buen tutorial.
    Ahora, como subo imagenes sin generar un formulario.
    Yo quisiera que mis usuarios cuando naveguen por la pagina no vean el formulario, osea no quisiera hacer algo asi como Facebook.
    Saludos

  42. Martin Gorgojo

    16. Feb, 2014

    Hola Mar celo me acabo de encontrar con tu tutorial y me parece estupendo y por ello me gustaría añadirle codigo, si ello es posible, para poder subir varias imágenes a la vez y que genere sus correspondientes miniaturas. Gracias por anticipado

  43. darla

    25. Feb, 2014

    hola si me funciono el codigo(eso creo ), si me guarda en la BD pero quiero mostrar la imagen en mi sitio, como le ago??

  44. Adrian

    29. May, 2014

    disculpen de casualidad hay manera de previsualisar la imagen antes de que se suba ??
    ej. en el formulario cargas la imagen y despues de que la seleccionas, aparece junto la imagen que acabas de seleccionar?? gracias de antemano

  45. Fidel

    28. Jul, 2014

    Lo podría hacer con varias imágenes?
    Saludos Fidel

  46. Alejandro

    27. Mar, 2015

    Hola Marcelo. Yo ya tengo mi formulario del cual me llegan los datos de los visitantes al correo, pero quiero agregar la opción de cargar imágenes, pero necesito que éstas me lleguen al correo. ¿qué debo variar en el PHP?. Muchas Gracias

  47. Roberto

    22. Feb, 2016

    Muchas Gracias Justo lo que buscaba

  48. Miguel

    31. Jul, 2016

    hola me gustaria que me ayudaras en lo siguiente tengo un formulario de productos que ingresas en pocas palabras nombre precio y la Imagen lo que necesito saber es al querer realizar una modificacion (si puedo los datos como nombre y precio) pero si no modifico esa imagen el campo donde se guarda el nombre desaparece y necesito saber como puedo solicitar que si encuentra una imagen no realize el cambio, en si la imagen no la borra pero el nombre del dato si entonces por lo tanto no muestra imagen es parecido a tu codigo el mio

    Gracias y espero tu respuesta

Deja tu opinión