Gestione input form HTML

17 May 2007 at 1:06 pm Leave a comment

Scrivo questo breve post che riguarda la gestione dei campi input dei form HTML. Spesso capita infatti di voler consntire all’utente di poter fare un upload. Per fare questo è sufficiente una cosa del genere :

<form name="imgform" method="post" action="<?echo $_SERVER['PHP_SELF'];?>" enctype="multipart/form-data">
<input type="file" name="userfile[]" id="userfile" size="64" maxlength="256" />
<br/>
<input type="file" name="userfile[]" id="userfile" size="64" maxlength="256" />
<br/>
<input type="submit" name="submit" value="Vai"/>
</form>

Come si potrà osservare si tratta di un semplice form che comprende all’interno due campi input di tipo FILE che faranno comparire sulla pagina HTML due pulsanti “Sfoglia…” con la relativa casella di testo nella quale comparirà il path completo della risorsa selezionata.

La pagina test.php potrebbe essere qualcosa del genere:

<?php

if (isset($_POST[’submit’])) {
//Stampo il nome del primo file
echo $_FILES['userfile']['name'][0]."<br/>";
//Stampo il nome del secondo file
echo $_FILES['userfile']['name'][1]."<br/>";

} ?>

Da notare che gli elementidi tipo FILE vengono distinti come fossero gli elementi di un array. Il problema di questa metodologia è che la stringa che viene elaborata dal file test.php verrà tagliata se contiene degli apostrofi.

Per ovviare a questo inconveniente vengono in aiuto i campi HIDDEN e Javascript. In particolare il form può essere sostituito dal seguente

<form name="imgform" method="post" action="test.php" enctype="multipart/form-data">
<input type="hidden" name="fileName_1" id="fileName_1">
<input type="file" name="userfile[]" id="userfile" size="64" maxlength="256" onChange="javascript:manageInput(fileName_1, userfile[0]);">
<br/>
<input type="hidden" name="fileName_2" id="fileName_2">
<input type="file" name="userfile[]" id="userfile" size="64" maxlength="256" onChange="javascript:manageInput(fileName_2, userfile[1]);">
<br/>
<input type="submit" name="submit" value="Vai"/>
</form>

Le parti evidenziate mostrano le modifiche effettuate. A questo dobbiamo aggiungere la seguente funzione Javascript:

function manageInput(postName, inputName) {

postName.value= inputName.value;

}

La funzione accetta in ingresso due parametri che sono appunto il riferimento all’elemento POST di tipo HIDDEN e all’elemento INPUT di tipo FILE. Come si vede non fa altro che aggiornare il valore della variabile di tipo POST. Questo evento scatta nel momento in cui selezioniamo una risorsa dal filesystem e viene popolato il cmapo di testo accanto alla casella “Sfoglia…”.

A questo punto il file test.php potrebbe riporate una sintassi di questo tipo:

<?php

if (isset($_POST['submit'])) {
echo $_POST['fileName_1']."<br/>";
echo $_POST['fileName_2']."<br/>";
}

?>

Questa volta non dovrebbero esserci sorprese!

Advertisements

Entry filed under: HTML, PHP.

Sniffer per tutti i gusti…. Black&White

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Recent Posts

Visitors to this site


%d bloggers like this: