Você está na página 1de 4

Cmopermitiralusuarioelegirunarchivodesdeunformulario.

APRENDERAPROGRAMAR.COM

CMO PERMITIR AL
USUARIO ELEGIR UN
ARCHIVO DESDE UN
FORMULARIO HTML PARA
ENVIARLO AL SERVIDOR.
(CU00725B)

Seccin: Cursos
Categora: Tutorial bsico del programador web: HTML desde cero
Fecha ltima actualizacin: 2012
Resumen: Entrega n25 del Tutorial bsico HTML desde cero.

Autor: Enrique Gonzlez Gutirrez

aprenderaprogramar.com, 2006-2012

Cmopermitiralusuarioelegirunarchivodesdeunformulario.

SUBIRARCHIVOSALSERVIDORUSANDOUNFORMULARIOHTML

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 una computadora cliente al servidor a travs de una
pgina web. El control habitualmente muestra un botn para elegir el archivo visualmente.
Tener en cuenta que para los formularios con subida de archivos hay que especificar el valor
"multipart/form-data" en el atributo "enctype" de la etiqueta (tag) HTML form, de otro modo, el
archivo no ser enviado. Escribe el siguiente cdigo en un editor como Notepad++ y gurdalo con el
nombre que quieras, por ejemplo pruebaEnvioArchivo.html.

<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form method="get" action="accion.php" enctype="multipart/form-data">
Ingresa el archivo:
<input name="imagen" type="file" />
</form>
</body>
</html>

Abre ahora el archivo creado. Debes de visualizar algo similar a esto.

aprenderaprogramar.com, 2006-2012

Cmopermitiralusuarioelegirunarchivodesdeunformulario.

La visualizacin puede ser un poco diferente segn el navegador que utilizemos.

Al presionar sobre el botn Seleccionar archivo (o Examinar en otros navegadores) se mostrar el


explorador de archivos de Windows y podremos seleccionar el archivo que deseemos.

En el cdigo que hemos escrito anteriormente nos falta un botn para poder realizar el envo del
formulario. Aade esta lnea al cdigo del formulario para disponer de ese botn:
<input name="enviar" type="submit" value="Enviar" />
Abre la pgina en tu ordenador, selecciona un archivo y pulsa en el botn de envo. En la Url a donde
nos dirige el navegador veremos el nombre del archivo seleccionado como un parmetro 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/Toshiba/Desktop/accion.php?imagen=foto.jpg&enviar=Enviar (esto sera un ejemplo de
la ruta que obtendramos si el formulario est en nuestro ordenador).

http://www.aprenderaprogramar.com/accion.php?imagen=foto.jpg&enviar=Enviar
ejemplo de la ruta que obtendramos si el formulario est en un servidor).

aprenderaprogramar.com, 2006-2012

(esto

sera

un

Cmopermitiralusuarioelegirunarchivodesdeunformulario.

La imagen ser enviada al servidor, lo cual significa que el archivo foto.jpg de nuestro ejemplo se
almacenar en un directorio del servidor (ordenador remoto) con el que estuviramos trabajando. Una
vez el archivo est en el servidor, para realizar operaciones con l tendramos que usar algn lenguaje
de programacin como JSP, ASP, PHP, etc.
Nosotros no entraremos a describir cmo sera el proceso total para despus de la subida de la imagen
operar con ella en el servidor, porque esto implicara el uso de otros lenguajes de programacin que no
son objeto de este curso. Si tienes inters, te recomendamos que una vez termines el curso de HTML
contines con el curso Tutorial bsico del programador web: PHP desde cero de
aprenderaprogramar.com, donde se explican los fundamentos del lenguaje PHP.

Prximaentrega: CU00726B
Accesoalcursocompleto en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192

aprenderaprogramar.com, 2006-2012

Você também pode gostar