Codificación aprenderaprogramar.com: CU00725B
SUBIR ARCHIVOS AL SERVIDOR USANDO UN FORMULARIO HTML
Los formularios HTML permiten que el usuario seleccione archivos para subirlos (enviarlos) al servidor. El control “entrada de archivos” muestra una caja de texto donde el usuario debe especificar la ruta del archivo que se encuentra en el ordenador del usuario y que será enviado al servidor.
De esta manera podemos enviar archivos desde un computador cliente al servidor a través de una página web. El control habitualmente muestra un botón para elegir el archivo visualmente.
EL ATRIBUTO ENCTYPE DE LA ETIQUETA FORM
Para permitir el envío de archivos a través de un formulario hemos de tener en cuenta varias cosas.
La primera, que existían dos métodos de envío: get y post. Get transmite la información en forma de texto a la url de destino, por tanto no será un método válido para el envío de archivos (ya que no podemos enviar un archivo en modo de texto a una url de destino). Para permitir la selección y envío de archivos a través de un formulario tendremos por tanto que usar el método post.
La segunda, que existe un protocolo para el envío de la información desde la url donde se encuentra el formulario hasta la url de destino. Este protocolo permite tener en cuenta si se envía simplemente texto o si se envían cosas más complejas como archivos, ya que no es lo mismo la transmisión de una cosa que de otra.
Si no se especifica el valor del atributo enctype el navegador aplica un valor por defecto (dicho valor es application/x-www-form-urlencoded). Este valor, que no es necesario especificar ya que el navegador lo añade sin necesidad de escribirlo, indica que se envía texto y permite que se apliquen los protocolos adecuados.
Para enviar archivos debe especificarse el valor del atributo enctype = "multipart/form-data" como veremos en el ejemplo de código a continuación.
TYPE FILE EN ETIQUETA INPUT
Finalmente, para crear el control en el formulario que permita al usuario seleccionar un archivo hemos de crear una etiqueta input y establecer su atributo type = "file"
Escribe el siguiente código en un editor como Notepad++ y guárdalo con el nombre que quieras, por ejemplo pruebaEnvioArchivo.html.
|
<!DOCTYPE html> <html> <head> <title>Ejemplo del uso de formularios - aprenderaprogramar.com</title> </head> <body> <form method="post" action="accion.php" enctype="multipart/form-data"> Ingresa el archivo: <input name="imagen" type="file" /> </form> </body> </html> |
Abre ahora el archivo html creado en tu navegador. Debes de visualizar algo similar a esto.
La visualización puede ser un poco diferente según el navegador que utilicemos.
Al presionar sobre el botón ‘Seleccionar archivo’ (o ‘Examinar’ en otros navegadores) se mostrará el explorador de archivos de Windows y podremos seleccionar el archivo que deseemos.
En el código que hemos escrito anteriormente nos falta un botón para poder realizar el envío del formulario. Añade esta línea al código del formulario para disponer de ese botón: <input type="submit" value="Enviar" />
Modifica ahora el método de envío y establece que sea GET en lugar de POST, selecciona un archivo y pulsa en el botón de envío. En la Url a donde nos dirige el navegador veremos el nombre del archivo seleccionado como un parámetro dentro de la URL una vez hayamos enviado el formulario. Las rutas pueden ser de este tipo, suponiendo que el archivo seleccionado se llamara foto.jpg:
file:///C:/Users/Asus/Desktop/accion.php?imagen=foto.jpg (esto sería un ejemplo de la ruta que obtendríamos si el formulario está en nuestro ordenador).
http://www.aprenderaprogramar.com/accion.php?imagen=foto.jpg(esto sería un ejemplo de la ruta que obtendríamos si el formulario está en un servidor).
Hemos cambiado el método a get para poder visualizar un resultado, ya que usando post, como ya sabemos, los datos se envían de forma oculta. Sin embargo usar get no tiene ninguna utilidad práctica, ya que como hemos indicado no permite que se envíe el archivo al servidor, aquí lo hemos empleado únicamente con fines didácticos.
Cuando usemos post, la imagen será enviada al servidor, lo cual significa que el archivo foto.jpg de nuestro ejemplo se enviará a la URL de destino y usando el código y lenguaje de programación adecuado, normalmente se procederá a almacenarlo en un directorio del servidor (ordenador remoto) con el que estuviéramos trabajando. Tanto para el proceso de recepción como para guardar y poder manipular posteriormente ese archivo necesitaremos de otros lenguajes de programación a los que se denomina lenguajes del lado del servidor como PHP, JSP, ASP, etc.
Nosotros no entraremos a describir cómo sería el proceso de recepción y manipulación del archivo en el servidor después del envío, porque esto implicaría el uso de otros lenguajes de programación que no son objeto de este curso, que se centra exclusivamente en HTML. Si tienes interés en estudiar un lenguaje del lado del servidor, te recomendamos que una vez completes el curso de HTML y el de CSS, continues con el curso “Tutorial básico del programador web: PHP desde cero” de aprenderaprogramar.com, donde se explican los fundamentos del lenguaje PHP.
EJERCICIO
Crea una página web que contenga un formulario que cumpla estas condiciones.
Como título antes del formulario debe figurar con etiquetas h1 el texto <<Inscripción al concurso Jara y Sedal>>. Debe contener:
a) Nombre
b) Apellidos
c) Dirección
d) Fotografía (aquí se debe dar opción a elegir un archivo de imagen que será la fotografía)
e) Un botón submit para enviar que muestre el texto <<¡¡¡Me apunto!!!>> y un botón reset para restablecer que muestre el texto <<Cancelar>>.
Ten en cuenta que para el envío de archivos tienes que establecer correctamente los atributos del formulario: method y enctype.
Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
