Corsi on-line

Upload multipli con HTML5

HTML5 colma una lacuna presente nella gestione degli upload che aveva caratterizzato le versioni precedenti del noto markup per la realizzazione di pagine Web; sostanzialmente esso prevede un supporto nativo per l’upload multiplo dei file nei form, ciò grazie ad un attributo opzionale denominato appunto multiple da specificare in corrispondenza dell’input type="file", cioè del campo per l’invio dei file.

Logo HTML5

Un esempio riguardante l’utilizzo di tale attributo dovrà basarsi, come in passato, su un attributo enctype valorizzato in modo da poter inviare dati codificati come multipart/form-data; oltre a questo aspetto, rimasto costante rispetto all’impostazione precedente, abbiamo però anche alcune novità:

<!doctype html>
<html>
  <head>
    <title>HTML5: upload multiplo</title>    
  </head>
  <body>
    <form action="upload.php" method="post" enctype="multipart/form-data">
      <input type="file" name="img" accept="image/jpeg" multiple>
      <button>Upload</button>
    </form>
  </body>
</html>

Come anticipato, multiple viene utilizzato per specificare che un elemento debba consentire valori multipli (in questo caso più file in fase di upload); tale attributo potrà essere valorizzato come nel form proposto, utilizzando semplicemente la stringa multiple, tramite il formato alternativo (e verboso) multiple="multiple" o lasciato vuoto se non richiesto.

Un’altra novità riguarda l’attributo accept, esso fornisce un’indicazione su quali tipi MIME dovranno essere accettati; nel caso specifico del nostro esempio, verranno accettate soltanto immagini di tipo JPEG, ma avremmo potuto definire come valide soltanto le GIF (image/gif) o tutte le immagini indipendentemente dal formato (image/*).

Per una lista completa dei tipi MIME supportati è possibile consultare l’apposito elenco messo a disposizione dal W3C Working Group.

Post correlati
I più letti del mese
Tematiche