Afin d’augmenter un maximum l’ergonomie de vos formulaires Web, il peut être utile de mettre en place un script d’upload d’images en Ajax. Celui-ci permettra, par exemple, de ne pas laisser attendre l’internaute sur une page tierce, ni de recharger entièrement la page actuelle. Cette technique, évitant des lourdeurs certaines, n’est cependant pas aussi simple que cela à mettre en place : Ajax ne permet pas d’uploader des images. C’est dit.
Si l’upload de photos n’est pas permis en Ajax, nous n’allons pas utiliser celui-ci. Nous nous contenterons du Javascript. Plutôt que de s’embarquer dans une théorie longue et imbuvable, regardons immédiatement un exemple.
On commence par la réalisation d’un formulaire classique d’upload d’image.
<input type="hidden" name="MAX_FILE_SIZE" value="1280000" />
<p>
<label for="fileBrowser">Please select a file :</label>
<input type="file" name="selectedFile" id="selectedFile" />
</p>
</form>
Voici un formulaire tout ce qu’il y a de plus normal. On n’oublie surtout pas de spécifier l’attribut enctype dans la balise form, ainsi que la taille du fichier grâce à l’input hidden ci-dessus.
Notre upload d’images ergonomique réside en fait dans l’attribut target. On lui spécifie une iframe comme cible. Ainsi, plutôt que de recharger intégralement toute la page, le formulaire se contentera d’envoyer la page de résultat du script upload.php à l’intérieur de la frame concernée. Voyons donc le code de la frame en question…
Celle-ci est vide à l’origine. Et pour cause, elle ne servira qu’à récolter la réponse de l’envoi du formulaire. On remarque le display: none; permettant de ne pas polluer l’affichage.
On rajoute aussi une image, sans aucun attribut, si ce n’est un id. Cela n’est pas valide W3C, nous sommes d’accord. Remarquez que la frame n’est pas non plus très conseillée, mais bon, passons… Pour rendre votre code valide, il serait possible d’insérer dynamiquement l’image et la frame, lorsque vous en aurez besoin, via Javascript. Cependant, pour des raisons de simplicité d’explications, nous n’atteindrons pas un tel niveau de rigueur.
Le script upload.php nous retourne le code suivant :
var img = parent.document.getElementById(’img-original’);
img.src = ‘mon-image.jpg’;
</script>
Et c’est tout. Ainsi, notre image verra sa source modifiée, et sera donc dynamiquement mise à jour. Le tout sans rechargement sauvage de toute la page. Mission accomplie !
A noter que je laisse le soin au lecteur de gérer de manière sécurisée le téléchargement de l’image du client vers le serveur, chacun ayant ses petites habitudes en la matière. ;)
2008-07-24 à 9.13 am
Haaa, je viens de comprendre comment ça marche !
Tu penses que l’upload de pièces jointes à la Gmail fonctionne sur le même principe ?
2008-07-24 à 12.59 pm
En effet, GMail utilise cette méthode, aussi connue sous le nom de “hidden frame”.