Como subir un archivo al servidor (Upload File)

Este es el código que se usa para subir archivos desde el cliente a tu pagina web usando un formulario, por ejemplo se usa para subir fotos, documentos, etc. o los famosos Avatares; esto es lo que comúnmente se denomina “upload” o “upload file“.

El Script se maneja en 2 partes, por cuestiones de tutorial lo haré en 2 paginas php, una que tenga el formulario y la otra que lo recepcion.

selecionar_archivo

Primera Parte

La pagina con el  formulario para hacer la selección del archivo, básicamente es un formulario con un input file y su botón de enviar, el código es:

<html>
<head>
<title>Subir un Archivo Imagen</title>
</head>
<body>
<form action="file2.php" method="post" enctype="multipart/form-data">
Seleccione el archivo:<br />
<input type="file" name="archivo_foto"><br>
<input type="submit" value="Enviar">
</form>
</body>
</html>

Lo que hay que destacar aquí son 2 partes: el <input type=”file” name=”archivo_foto”> que es el cuadro de texto+ el botón de Examinar, en donde se define el nombre de elemento que nos servirá en el formulario receptor;  en este caso es “archivo_foto” ($_FILE[‘archivo_foto’] cuando se trabaje en el script 2) otra propiedad que le puedes definir es el size para modificar su ancho (size=”30″)

la otra línea a resaltar es la propiedad en el FORM enctype=”multipart/form-data” que es muy importante ya que definirá el envío del archivo

Segunda Parte

Este seria el archivo que recepciona lo enviado por el otro script

<html>
<head>
<title>Mostrar Archivo</title>
</head>
<body>
<?php
copy($_FILES['archivo_foto']['tmp_name'],$_FILES['archivo_foto']['name']);
echo "El archivo se grabo correctamente.<br>";
$nombre=$_FILES['archivo_foto']['name'];
echo "<img src=\"$nombre\">";
?>
</body>
</html>

Cuando llegamos aquí desde la pagina donde subimos el archivo lo primero que tenemos que hacer es mover el archivo temporal a la ubicación que queremos.

La función COPY, la explicación a esa línea seria “cópiame el archivo /tmp/phpxDifNo a ./xammp.jpg” es decir cópialo a donde me encuentro ahora mismo con el nombre del archivo que tubo cuando fue subido (la carpeta debe tener permiso 777 o sea, de escritura)

En las siguientes líneas obtenemos el nombre del archivo para ser luego usado en el tag IMG y mostrarlo en pantalla 😀

selecionar_archivo_guardar

Observaciones:

  • La carpeta donde pongas ambos scripts debe tener permiso 777 ya que en la copia como solo defino el nombre del archivo lo grabará en la ruta actual
  • El tamaño del archivo, es decir, La carga del archivo depende de la configuración de tu PHP en php.ini, lo puedes ver el info.php, las variables a modificar son:
    php_value upload_max_filesize 10M
    php_value post_max_size 10M
    php_value max_execution_time 300

    Ahí aumentamos a 10 megas la subida (2 por defecto) y también el tiempo de ejecución para que no nos de un mensaje de error por esperar mucho tiempo (archivo grande demora en subir), también se puede hacer esa modificación en el .htaccess y así evitar tocar la configuración del php.ini

  • Lo que quiero destacar es la estructura de $_FILE[‘archivo_foto’] la superglobal, recuerden que el nombre fue definido en el primer script. la estructura es la siguiente:
    [archivo_foto] => Array
    (
    [name] => xampp.jpg
    [type] => image/jpeg
    [tmp_name] => /tmp/phpxDifNo
    [error] => 0
    [size] => 4878
    )
    1. name es el nombre del archivo del lado del cliente
    2. type es el formato del archivo
    3. tmp_name es la ruta y nombre del archivo temporal en el servidor cuando fue subido (no tiene porque tener extensión)
    4. error es el manejo de errores en caso existan
    5. size es el tamaño del archivo que acabamos de subir

Espero que este Tutorial les hay sido de mucha ayuda

Comments

6 respuestas a “Como subir un archivo al servidor (Upload File)”

  1. Ulises Avatar
    Ulises

    Oye una pregunta, tu funcion me sirvio mucho, ahora me podrias ayudar para que limitara la funcion a puras imagenes y como modificar la ruta, para que se guarden las imagenes en otro directorio

  2. Horacio Avatar

    Buen tutorial Gracias

  3. Derek Avatar

    Amigo nesesito super ayuda :c tengo esta web yourcuppass.jimdo.com todo lo que esta ai lo hise yo pero kiero tener un boton examinar como el que explicas pero no entiendo mucho kiero que me ayudes plisss quiero para que compartan imagenes archivos etc porfa amigo pero que cuendo suban imagenes q se miren

  4. Cristian Avatar
    Cristian

    Amigo buenas tardes, mira muy buen post, pero tengo un problema, tengo un formulario con varios select y el file, pero al momento de enviar el formulario me carga el archivo pero el valor de los select no me los envía para leerlos.

    Ayudame porfa, te agradezco.

  5. Luis Avatar
    Luis

    Buen dia mecesito una ayuda tengo un archivo en texto el cual quiero subir a una base en mysql
    la base son alumnos y sus notas etc
    Me podes decir como lo puedo hacer
    Desde ya muchas gracias por la ayuda que me puedan dar Saludos

  6. Nnicolle Avatar
    Nnicolle

    Disculpa, me podrías decir en dónde se deben dar los permisos, por favor. ¿En la ventana terminal?
    Muchas gracias

Agregue un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *