Subir archivos de imagen a un servidor web por HTTP y a través de un formulario

23 enero, 2008 por Mr. FotoPex Dejar una respuesta »

 

 

Este es un ejemplo sencillo para subir una imagen .jpg o .gif a un servidor web por HTTP y a través de una página con un formulario. Ademas al final del artículo encontraras los archivos de ejemplo.

Primero, creamos el formulario donde el usuario seleccionara la imagen que subirá.

Observa que se ha colocado un atributo en el formulario:
enctype="multipart/form-data". Este atributo es necesario para subir en un mismo formulario datos y archivos.

HTML:
  1. <form action="subirarchivo.php" method="post" enctype="multipart/form-data">
  2.  <b>Enviar un nuevo archivo: </b><br />
  3. <input name="userfile" type="file"><br />
  4. <input type="submit" value="Enviar">
  5. </form>


Este es su aspecto. Además puedes incluir campos de texto, si lo necesitas.

Enviar un nuevo archivo:

La página que sube los archivos la llamaremos subirarchivo.php

En esta página haremos las comprobaciones necesarias para saber si las características del archivo a subir son las que deseamos y realizar la copia del archivo.

Al envír el formulario, el navegador lo copia en una localización temporal del servidor, de donde nosotros lo moveremos a un lugar definitivo donde queremos que se almacene. Recuerda que esta carpeta debe tener los permisos 777.

Si no es copiado a ningún sitio, después de la ejecución de la página, es borrado. Así que lo moveremos con la función move_uploaded_file(), que recibe el nombre del archivo temporal que se desea subir y el nombre del archivo que se deseamos dar.

PHP:
  1. <?php
  2. //El tipo mime del fichero. Un ejemplo podr&iacute;a ser "image/gif".
  3. $tipo = $HTTP_POST_FILES['userfile']['type'];
  4.  
  5. //El tama&ntilde;o en bytes del fichero recibido.
  6. $tamano = $HTTP_POST_FILES['userfile']['size'];
  7.  
  8. // El nombre original del fichero en la m&aacute;quina del usuario lo obtenemos con:
  9. // $HTTP_POST_FILES['userfile']['name'];
  10.  
  11. // Pero en este caso crearemos un nuevo nombre para evitar reemplazar alguno si ya existe.
  12. //obtenermos la extension del archivo.
  13. if ($HTTP_POST_FILES['userfile']['type']=="image/gif"){ $formato="GIF"; }
  14. if ($HTTP_POST_FILES['userfile']['type']=="image/jpeg"){ $formato="JPG"; }
  15.            
  16. $nombre = date('YmdHis').substr(md5(rand()), 0, 5).'.'.$formato;
  17.  
  18.  
  19. //comprobamos si las caracter&iacute;sticas del archivo son las autorizadas.
  20.  
  21. if (!((strpos($tipo, "gif") || strpos($tipo, "jpeg")) && ($tamano <100000))) {
  22.     echo 'La extensi&oacute;n o el tama&ntilde;o de los archivos no es correcta.';
  23.     echo '<br /><br />Se permiten archivos .gif o .jpg de un tama&ntilde;o de 100 Kb m&aacute;ximo.';
  24. }else{
  25.     //El nombre del fichero temporal que se utiliza para almacenar en el servidor el archivo recibido. 
  26.     if (move_uploaded_file($HTTP_POST_FILES['userfile']['tmp_name'], 'files/'.$nombre)){
  27.         echo "El archivo ha sido cargado correctamente.";
  28.         echo '<img src="files/'.$nombre.'" />'; // desplegamos la imagen
  29.     }else{
  30.         echo "Ocurri&oacute; alg&uacute;n error al subir el fichero. No pudo guardarse.";
  31.     }
  32. }
  33. ?>

floppy.jpg
Clic para descargar el archivo
Publicidad

13 comentarios

  1. hola super bien muchas gracias… solo una cosilla… como hago para visualizar el porcentaje de subida del archivo????????????

  2. Irais Flores dice:

    tengo una duda cuando le doy click en el boton enviar, me dice El archivo ha sido cargado correctamente. pero no se muestra

  3. webmaster dice:

    Hola manuel gonzalez, Este es un ejemplo sencillo, necesitarias utilizar alguna herramienta como ajax para ver la carga del archivo.

    Hola Irais, y ya revisaste si el archivo existe dentro de la carpeta files?
    Dime como pudo ayudarte.

  4. hola grx por responder =)

    haber si me explico bien, soy diseñador grafico, y la idea es usar este medio para que diferentes compañeros de trabajo puedan subir los archivos, para q a su vez los proveedores puedan bajar los archivos a
    imprimir.

    entonces, tengo el siguiente problema
    cada archivo comprimido compuesto con diferentes archivos pueden pesar perfectamente 50 megas, entonces cuando se hace el acceso a traves de este metodo no se sabe cuanto falta, si sube o no suben los archivos, bueno de ahi mi pregunta….

    como hago para visualizar el porcentaje de subida del archivo???

    ahora tu me hablas de ajax y la verdad que primera vez q lo escucho,
    lamento mi ignorancia.

  5. Irais Flores dice:

    Ya coloque las imagenes pero me muestra El archivo ha sido cargado correctamente con un cuadro que contiene una equis roja

  6. Irais Flores dice:

    como le puedo hacer para que se visualice la imagen

  7. webmaster dice:

    Hola manuel gonzalez

    echale un ojo a la entrada mostrar imagenes con ajax y php para que te des una empapada de ajax.

    Al final de la entrada encontraras un enlace que te muestra como hacer lo que quieres pero no lo he probado

    Suerte y me gustaría que compartieras con nosotros el código que realices para seguir aprendiendo todos.

  8. Juan F Abril dice:

    Hola,, que exelente script, lo implemete con una conexion a base de datos , si alguien le interesa envienme un correo a jf_galeano@yahoo.es. ahora me gustaria saber como hago para llamar y mostrar por pantalla los campos que ingrese junto con la imagen guardada. gracias

  9. Que buen aporte gracias
    ——————————–

  10. Jose dice:

    WOOOOOWWWWWWWW
    Gracias!!!! por fin un script que me ha funcionado!!!
    pero ahora…¿como borro el archivo que he subido? Por que por ftp no me aparece :shock:

  11. Jose dice:

    ANDA!!!
    Si que aparece,tenia que refrescar la página :grin:
    Gracias de nuevo por este script,es muy muy útil!!

  12. INGMICHEL dice:

    HOLA MUCHAS GRACIAS POR EL SCRIPT, NECESITO HACER LO MISMO PERO GUARDANDO LA URL DE LA IMAGEN EN UNA BASE DE DATOS Y LUEGO A TRAVES DE UN QUERY SQL MOSTRARLA, POR FAVOR NECESITO AYUDA…

  13. Roma dice:

    Yo tambien quiero subir el upload de imagen, junto a un formulario de registro, y guardar la url en la BD, para q luego todo cargue en la web cuando un usuario haga login.

Deja un comentario