Introducció
Per a carregar fitxers al servidor web utilitzem l'etiqueta input amb el tipus de camp file . Tot i que crear un camp que ens permeti carregar fitxers en un formulari web és simple, cal tenir en compte tota una sèrie de paràmetres per tal que el fitxer pugui ser processat en el servidor web. En aquest document s'explicaran les diferents opcions que cal tenir en compte per tal de poder carregar i processar un fitxer amb èxit en un servidor web.
Etiqueta form
Quan es crea un formulari que ha de permetre l'usuari la càrrega d'arxius al servidor web, cal especificar com a mètode d'enviament "post" , ja que aquest és l'únic mètode que permet l'enviament d'arxius.
El segon aspecte a tenir en compte és el tipus de codificació a utilitzar. L'únic tipus que permet l'enviament d'arxius és "multipart/form-data". Per tant, caldrà especificar aquest valor a l'atribut enctype .
Atribut enctype
L'atribut enctype és un atribut ue es defineix en l'etiqueta form i ens permet definir el format/codificació a utilitzar per a transmete els continguts.
Els tres valors possibles d'aquest atribut són:
| Valor | Descripció |
|---|---|
| application/x-www-form-urlencoded | Valor per defecte si l'atribut no està especificat. Substitució de certs caràcters (espai, apòstrof...) pels seus equivalents. Per exemple, el text "it's an example" , codificat amb x-www-form-urlencoded es transformaria amb "it%27s+an+example". L'apòstrof (') s'ha substituit per %27 (símbol % seguit del codi ASCII per l'apòstrof) i l'espai (" ") pel símbol "+". Si hi ha més d'un camp d'entrada en el formulari s'utilitza el símbol & per a separar la informació de cada un d'ells. |
| multipart/form-data | És el sistema que utilitzarem si el formulari conté molta informació. A més, és obligatori utilitzar aquest format si es volen carregar fitxers a través de la plana web. |
| text/plain | Es tracta d'una opció no recomenable només disponible amb HTML 5. Video: Per què el valor text/plain no s'ha d'utilitzar com a tipus de codificació (enctype) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>POST</title>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<!-- Elements formulari -->
<button type="submit">Send</button>
</form>
</body>
</html>
Vídeo - Capçalera HTML pels diferents valors de l'atribut enctype
Etiqueta input
Atribut formenctype
HTML5 incorpora l'atribut formenctype que també permet definir la codificació que es vol utilitzar per a enviar la informació del formulari en el servidor. Aquest atribut s'aplica als elements de tipus submit ( button: type submit, input: type submit i input: type image )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>POST</title>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<!-- Elements formulari -->
<!-- Tipus de codificació application/x-www-form-urlencoded
NO permet enviar fitxers !!! -->
<button type="submit" formenctype="application/x-www-form-urlencoded">
Send
</button>
</form>
</body>
</html>
Atribut type
Un cop creat el formulari i especificat el tipus de codificació com a multipart/form-data és necessari crear el camp o camps que ens permetin carregar els fitxers. Per fer-ho utilitzarem l'etiqueta input amb l'atribut type inicialitzat a "file". Per a poder recuperar els fitxers en el servidor , serà necessari associar un nom ( atribut name ) a cada un dels elements de tipus input .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>POST</title>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<!-- Elements formulari -->
<label>Foto
<input type="file" name="foto" />
</label>
<label>Carta presentació
<input type="file" name="carta" />
</label>
<!-- Tipus de codificació application/x-www-form-urlencoded
NO permet enviar fitxers !!! -->
<button type="submit" formenctype="application/x-www-form-urlencoded">
Send
</button>
</form>
</body>
</html>
Atribut accept
Aquest atribut ens permet especificar quins són els tipus de fitxer que es poden carregar en un determinat camp de tipus input . Es poden seleccionar múltiples tipus separant-los mitjançant una coma (,). Cal tenir present que aquest atribut és una ajuda a l'usuari per tal que el gestor de fitxers només mostri els arxius del tipus especificat: l'usuari podrà carregar qualsevol altre tipus d'arxiu.
Video - Com funciona l'atribut accept en la càrrega d'arxius.
Seguretat
L'operació de carregar un fitxer en un servidor web és una operació perillosa: cal verificar que el fitxer i l'ubicació on es guarda sigui la correcta. En aquest document només es fa referència a la definició dels elements HTML que ens permeten carregar un fitxer en un servidor web, però no s'explica com processar aquest fitxer en el servidor. Tot i que el fitxer arribi al servidor, aquest es guarda en un directori temporal, que no ha de presentar cap mena de risc pel sistema.
En el cas que el fitxer es guardi en el servidor web, l'usuari pot esbrinar la URL i accedir al fitxer. L'accés al fitxer provoca la seva execució en el servidor web amb els permisos de l'usuari amb què s'està executant el servei web. Aquest és un dels motius pel qual cal anar molt en compte i validar a conciència els fitxers penjats pels usuaris (En aquest curs no ens hem de preocupar de la seguretat perquè no s'aplicaran llenguatges web de servidor, però qui estigui interessat en la següent URL s'expliquen algunes de les precaucions que cal prendre abans d'acceptar un fitxer com a vàlid. Més informació a Why File Upload Forms are a Major Security Threat