Listado completo de tutoriales

Temario del Tutorial->37 - Formulario - input type="file"


El control de tipo file nos permite enviar un archivo al servidor. Nuevamente el HTML solo indica al navegador que debe enviar el archivo al servidor pero debe haber en el servidor un programa que lo almacene en una carpeta de dicho servidor.

Veamos la sintaxis para disponer un control de tipo file:

<input type="file" name="archi"> 

Nuevamente utilizamos el elemento HTML input para definir este tipo de control. En la propiedad type inicializamos con el valor file. Inicializar la propiedad name también es importante ya que mediante este nombre se lo recupera en el servidor.

Otra cosa muy importante a tener en cuenta cuando hacemos upload de archivos al servidor es inicializar la propiedad enctype del elemento form:

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

Con esto indicamos al navegador que el formulario almacena uno o más archivos que deben ser enviados al servidor.

Confeccionemos una página que solicite el ingreso de un nombre y la foto de la persona:

<!DOCTYPE html>
<html>
<head>
  <title>Prueba de formulario</title>
  <meta charset="UTF-8">
</head>
<body>
<form action="registrardatos.php" method="post" enctype="multipart/form-data">
  Ingrese su nombre:
  <input type="text" name="nombre" size="30"><br>
  Seleccione la foto:
  <input type="file" name="foto">
  <br>
  <input type="submit" value="Enviar">
</form>
</body>
</html>

El resultado en el navegador es:

input file

Recordemos siempre inicializar la propiedad enctype del elemento form:

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

Tenga en cuenta que si no se hace nigún programa en el servidor el archivo no se almacena. Si quiere conocer como se hace esto en PHP puede visitar el tutorial de: PHP Ya


Retornar