venerdì 2 dicembre 2011

Filtrare i tipi di files di HTML file input

Con le specifiche HTML 4.01 è stato definito un attributo chiamato accept per i tag di tipo input type="file".

Questo attributo è usato per specificare un lista di contenuti (MIME types) separata da virgola che il server può processare correttamente quando gli viene inviato il form (che contiene il tag input). Ad esempio se si vuole indicare che i tipi validi da passare al server sono solo immagini gif o jpeg aggiungiamo l'attributo accept="image/gif,image/jpeg" al tag input.

E'supportato anche l'uso delle wildcards, ciò significa che per indicare ad esempio tutti i files di tipo immagine posso scrivere "image/*" (anche se questa sintassi non esprime un tipo MIME valido) .

I browsers posso usare questa informazione per filtrare i tipi di files accettati. Sfortunatamente sembra che il supporto attuale dei browsers sia inesistente, nessun filtro viene applicato anche se specificato .

L'unico modo per dare un po' di conforto agli utenti è usare javascript lato client. Ad esempio, se volessimo fare si che un utente debba specificare per forza un file di tipo JPEG potremmo scrivere:

<SCRIPT language=JavaScript type=text/javascript><!--
function Controlla(testoVuoto)
{
 var ext = document.frm.immagine.value;
 if(ext.length != 0)
 {
  ext = ext.substring(ext.length-3,ext.length);
  ext = ext.toLowerCase();
  if(ext != 'jpg')
  {
   alert('Hai selezionato un file .'+ ext +
   ' ma sono accettati solo i file .jpg!');
   return false;
  }
 }
 else if(testoVuoto)
 {
  alert('Seleziona un file .jpg!');
  return false;
 }

 return true;
}
//--></SCRIPT>
<FORM name=frm onsubmit="return Controlla(true);" 
action=http://www.visual-basic.it/Upload.aspx method=post encType=multipart/form-data>
<P>Seleziona un file JPEG (.jpg) da caricare:</P>
<BR>
<INPUT type=file accept=image/jpeg size=50 name=immagine>
<P>Includi anche una breve descrizione:</P>
<BR>
<TEXTAREA onfocus=Controlla(false); name=txtDesc rows=3 cols=40></TEXTAREA>
<INPUT type=submit value=Manda>
</FORM>