PHP & HTML5 – Come caricare più foto sul server

Finalmente con HTML5 ho potuto implementare l’upload multiplo di file sul server. Fino ad ora al tag <input type=”file”> era possibile associare un solo file, ma oggi vedremo come semplificare il tutto.

 

Per prima cosa dobbiamo settare correttamente i tag nella pagina che verrà ricevutà dal client:

<form id=”myform” action=”myform.php” method=”post” enctype=’multipart/form-data’>

<input id=”file” name=”files[ ]” type=”file” multiple>

<input type=”submit” value=”carica”>

</form>

Ovviamente la cosa più importante del codice sopra riportato è appunto il tag input di tipo file. Con HTML5 è stato introdotto un nuovo attributo, il multiple, che specifica che un utente può inserire più di un valore in elemento input (maggiori informazioni qui). 

Per sfruttare questa potenzialità anche dal lato server dobbiamo aggiungere al valore dell’attributo name le parentesi quadre. Così facendo definiamo un array contenente i file selezionati dall’utente, al quale è possibile accedere come in un qualsiasi array, come indicato nell’esempio sottostante:

for($i=0;$i<count($_FILES[‘file’]);$i++){

move_uploaded_file($_FILES[‘file’][‘tmp_name’][$i],$_SERVER[‘DOCUMENT_ROOT’].’/’.$_FILES[‘file’][‘name’][$i]);

}