Upload de imágenes con php

Script para subir imágenes mediante un formulario y guardarlas en el servidor utilizando php.

Lo primero que tenemos que crear una página php incluyendo los tags html y dentro del body crear un formulario de la siguiente forma:

<form action="index.php" method="POST" enctype="multipart/form-data"/>
Añadir imagen: <input name="archivo" id="archivo" type="file"/>
<input type="submit" name="subir" value="Subir imagen"/>
</form>

Este formulario tiene la acción de volver a cargar la página con método de envío POST y que va a permitir subir algún tipo de archivo. Contiene un input tipo file que nos permitirá seleccionar un archivo de nuestro disco duro y un botón tipo submit para ejecutar el formulario.

Al pulsar el botón «Subir imagen» será cuando entre en acción el código php que se encargará de comprobar y subir la imagen al servidor en el caso de que sea correcta. Este código pued ir en el mismo body por encima del formulario.

<?php
//Si se quiere subir una imagen
if (isset($_POST['subir'])) {
   //Recogemos el archivo enviado por el formulario
   $archivo = $_FILES['archivo']['name'];
   //Si el archivo contiene algo y es diferente de vacio
   if (isset($archivo) && $archivo != "") {
      //Obtenemos algunos datos necesarios sobre el archivo
      $tipo = $_FILES['archivo']['type'];
      $tamano = $_FILES['archivo']['size'];
      $temp = $_FILES['archivo']['tmp_name'];
      //Se comprueba si el archivo a cargar es correcto observando su extensión y tamaño
     if (!((strpos($tipo, "gif") || strpos($tipo, "jpeg") || strpos($tipo, "jpg") || strpos($tipo, "png")) && ($tamano < 2000000))) {
        echo '<div><b>Error. La extensión o el tamaño de los archivos no es correcta.<br/>
        - Se permiten archivos .gif, .jpg, .png. y de 200 kb como máximo.</b></div>';
     }
     else {
        //Si la imagen es correcta en tamaño y tipo
        //Se intenta subir al servidor
        if (move_uploaded_file($temp, 'images/'.$archivo)) {
            //Cambiamos los permisos del archivo a 777 para poder modificarlo posteriormente
            chmod('images/'.$archivo, 0777);
            //Mostramos el mensaje de que se ha subido co éxito
            echo '<div><b>Se ha subido correctamente la imagen.</b></div>';
            //Mostramos la imagen subida
            echo '<p><img src="images/'.$archivo.'"></p>';
        }
        else {
           //Si no se ha podido subir la imagen, mostramos un mensaje de error
           echo '<div><b>Ocurrió algún error al subir el fichero. No pudo guardarse.</b></div>';
        }
      }
   }
}
?>

Ver ejemplo en funcionamiento

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(14 votos, promedio: 5 de 5)
Comparte en las redes sociales

26 respuestas a “Upload de imágenes con php”

  1. mauro dice:

    Muy bueno!!!!!!!!!

    Una consulta, si al momento de guardar el archivo quiero que tenga la misma id que tiene la db.

    Bastaría con reemplazar esta linea ?

    $temp = $_FILES[‘archivo’][‘tmp_name’];

    con

    $temp = $_FILES[‘archivo’][$id];

    o algo asi ?

    Gracias.

  2. carol dice:

    hola una pregunta si quiero subir multiples archivos y guardarlos a una subcarpeta pero esta subcarpeta deberá contener el nombre o id de usuario como lo haría ? gracias

  3. Amanda García dice:

    Hola José…. Buen día
    He sido un asidua lectora suya y varios script me han servido.

    Este en cuestión «Upload de imágenes con php» me ha funcionado perfecto en el localhost.
    pero cuando lo aplico en el servidor web, no me sube la imagen. Ya revisé las variables y todas están cargadas
    con la información que debería ser. No entiendo que es lo que pasa.
    No se si me puedas dar una orientación al respecto.
    Mil gracias

    • Jose Aguilar dice:

      Hola,

      En estos casos suele ocurrir los siguientes problemas:

      1) Revisa que tu servidor permita esta operación.
      2) Quizá se está incumpliendo alguna restricción de tu servidor. Revisa el registro de errores.
      3) Quizá se trate de un problema de permisos.

      Saludos

  4. Marx dice:

    Me fue muy útil, muchas gracias por el aporte

  5. luis carlos dice:

    me funciono perfecto bro, pero tengo una duda y es que como podria elegir una imagen especifica y poder editarla, muchas gracias.

    saludos

  6. jorge dice:

    Buenos dias amigo, saludo me funciono tu codigo gracias y muchas bendiciones!!

  7. Oscar Alvarado dice:

    buenas noches estoy haciendo un formulario, pero necesito que el programa me reconozca al cargar un archivo tipo texto (pdf, word) y me muestre un comodin que me diga que no es una imagen si no un archivo escrito.

  8. Hola Jose Aguilar, que gusta ver tus publicaciones,
    Estaba intentando insertar la imagen del Input File dentro de un documento PDF que genero con la libreria MPDF, los has intentado antes?

    Yo llevo muchas semanas con un formulario y no se como hacer esa parte y ya le di vueltas a StackOverflow.

    PD:* uso tu mismo codigo solo que en lugar del echo que muestra la imagen, la guardo en una variable que me escribe el pdf.

  9. Henry dice:

    Hola Amigo, me puedes dar alguna recomendación, necesito subir imágenes a un catalogo tipo galeria, las cuales muestren una imagen pequeña y 3 o 5 imágenes grandes cada una, pueda configurar los tamaños que se mostraran en la pagina y el codigo de esa referencia y algo importante es que se puedan tomar imágenes de cualquier peso – tamaño y el programa las reduzca de tamaño y peso que yo lo indique. Gracias

  10. Salvador Marquez dice:

    disculpa de donde eres quiero queme hagan un trabajo. https://www.facebook.com/salvadormarquezserrano?ref=bookmarks

  11. M4ku4z dice:

    Bueno pero es vulnerable al rfi.

  12. Andres dice:

    Hola Jose, excelente ejemplo ya lo puse en practica y me funciona perfecto, tengo un inconveniente ahora y es que no se como implementarlo con FPDF, si saber por favor te lo agradezco que me ayude 🙁

    • Jose Aguilar dice:

      Hola,

      Este ejemplo también puede servir para archivos pdf pero tendrás que adaptarlo. En la condición que controla el tipo de archivos deberás contemplar los archivos pdf. Puedes hacer una prueba a la hora de subir el arhivo pdf intenta imprimir la variable $_FILES[‘archivo’][‘type’] para que puedas observar como es el tipo del archivo pdf para poder hacer las condiciones correctamente.

      Saludos

  13. esme dice:

    Disculpa, estoy usando apache en centOS 7, al subir la imagen me aparece un error, creo que es por la ruta, a decir verdad nose que ruta poner, de igual forma mi proyecto esta en /var/www/html/proyecto.com, al poner esa ruta sigue apareciendo con error

    • Jose Aguilar dice:

      Hola,

      Si te refieres a la ruta de la imagen que se sube. En el ejemplo en funcionamiento estamos usando una carpeta /images y ahí dentro se depositan. La ruta que ponemos para mostrarla es simplemente, por ejemplo: images/nombre-imagen.png

      Saludos

  14. eleomar dice:

    hola saludos como puedo hacer para guardarla en una base de datos con un formulario de datos personales y despues consultar dichos datos con la imagen ??? saludos…..

    • Jose Aguilar dice:

      Hola,

      Creo que necesitarás guardar el nombre de la imagen al menos en la base de datos para luego poderla mostrar junto con sus datos con la etiqueta img.

      Saludos

  15. jose dice:

    Disculpa como puedo hacer que al subir la imagen, muestre la url para copiarla imagen e insertarla en algún blog

    • Jose Aguilar dice:

      Hola,

      La url la deberás construir tu mismo después de haber realizado la subida sabiendo el dominio,directorio donde lo guardaste y nombre del fichero que viene dado en el array $_FILES.

      Saludos

  16. Sergio dice:

    Disculpa cómo se podría mostrar la imagen que se subió en otra página?
    Eh intentado y no puedo hacerlo :C

Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre