Asynchronous upload form

Yoan Blanc — Sun, 03 Sep 2006 — ,

Everyone who’s tested GMail has seen that the uploading function for attaching a document to a new message is pretty cool, not the crap of SquirrelMail that reloads the whole page.

An uploading form à la GMail is pretty easy to build. 

<form target="target" enctype="multipart/form-data" method="post" action="upload.php">
	<iframe name="target" src="" style="width:0;height:0;border:0 none;" ></iframe>
	<input type="file" name="filename" />
	<input type="submit" value="Upload" >
</form>

Here is the form, you can customize it with onchange event, lots of div’s, label’s and so on but here is the basis.

When the user submits the form, it will send it into the iframe because of the target attribute. Now everything you have to do is into the upload.php treats the uploaded file and output a piece of JavaScript that will tell the parent page that everything is ok.

Ceux qui ont un compte GMail, le savent bien, avoir un formulaire d’upload qui fonctionne de manière asynchrone est un vrai petit bonheur. Il est possible de continuer l’édition de son message pendant que les fichiers à joindre sont envoyés.

La portion de code HTML ci-dessus est un formulaire les plus simples que l’on puisse faire remplissant cette fonction. L’élément important est l’attribut target qui va faire qu’au moment de l’envoi, le document va être envoyé dans l’iframe. Il ne reste plus qu’à traiter le fichier depuis upload.php et, pour faire les choses bien, informer la page parente que l’envoi est terminé via JavaScript.

Digg it!, so del.icio.us, blogmarks, reddit.