Temario del Tutorial33 - Subir un archivo al servidor (Upload)


Una actividad común en un sitio es poder almacenar un archivo en el servidor, más comunmente conocido como upload.

Se necesita en muchas ocasiones este algoritmo, por ejemplo para subir fotos, documentos, programas, etc.

Se requieren dos páginas, una de ellas, un formulario donde seleccionamos el archivo a enviar y otra página donde se graba el archivo en el servidor.

El formulario para hacer la selección del archivo es:

<html>
<head>
<title>Problema</title>
</head>
<body>
<form action="pagina2.php" method="post" enctype="multipart/form-data">
Seleccione el archivo:
<input type="file" name="foto"><br>
<input type="submit" value="Enviar">
</form>
</body>
</html>

Veamos los puntos que tenemos que respetar cuando efectuamos el upload de archivos:

<form action="pagina2.php" method="post" enctype="multipart/form-data">

Se define una nueva propiedad para la etiqueta form, con esta indicamos que dentro del formulario de carga se envían archivos. Hay que tener mucho cuidado cuando tipeamos esta propiedad, si nos equivocamos en algún caracter el proceso de upload no funcionará.

El control HTML para la selección del archivo se llama "file":

<input type="file" name="foto"><br>

Automáticamente aparecerá el botón dentro de la página para poder navegar en nuestro disco duro para la selección del archivo (por defecto PHP está configurado para poder cargar archivos de hasta 2 Mb, de todos modos, a este valor lo podemos modificar).

La segunda página es:

<html>
<head>
<title>Problema</title>
</head>
<body>
<?php
  copy($_FILES['foto']['tmp_name'],$_FILES['foto']['name']);
  echo "La foto se registro en el servidor.<br>";
  $nom=$_FILES['foto']['name'];
  echo "<img src=\"$nom\">";
?>
</body>
</html>

Cuando se ejecuta esta página, ya está almacenado en el servidor el archivo, en una carpeta temporal. Ahora nos hace falta copiar el mismo a la carpeta donde se encuentra nuestra página (en definitiva nuestro sitio de internet). Para esto llamamos a la función copy:

copy($_FILES['foto']['tmp_name'],$_FILES['foto']['name']);

La matriz $_FILES almacena el nombre del archivo almacenado en el directorio temporal ($_FILES['foto']['tmp_name']) y el nombre del archivo originario ($_FILES['foto']['name'])

Por último mostramos en la página el archivo que se almacenó en el servidor:

$nom=$_FILES['foto']['name'];
echo "<img src=\"$nom\">";

Otras cosas interesantes que tiene la matriz $_FILES:

$_FILES['foto']['name'] El nombre original del fichero en 
                        la máquina cliente.
$_FILES['foto']['type'] El tipo de archivo (si el navegador
                        lo proporciona). Un ejemplo podría ser "image/gif".
$_FILES['foto']['size'] El tamaño en bytes del fichero recibido.
$_FILES['foto']['tmp_name'] El nombre del archivo temporal que se 
                        utiliza para almacenar en el servidor el archivo recibido.


Problema resuelto.

Copiar el contenido de este cuadro de texto al NotePad++ y grabarlo en la carpeta c:\wamp\www con un nombre con extensión php (si hay varios cuadros de texto grabar cada uno en un archivo distinto).
luego abrir el navegador (Chrome, FireFox, IExplorer etc.) y en la barra de direcciones tipear: http://localhost/pagina1.php (o el nombre del archivo que le dió)

pagina1.php

Ejecutar ejemplo

pagina2.php

Problema propuesto.

Confeccionar un programa que permita hacer multiples upload con una página (por ejemplo que permita seleccionar hasta 3 archivos)

Solución
pagina1.php

Ejecutar ejemplo
pagina2.php

Retornar