jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Accueil du site > Plugins > Upload de fichiers, pour tester le plugin form.js

Upload de fichiers, pour tester le plugin form.js

mercredi 11 juillet 2007, par Fil

Depuis la version 1.1.3 de jQuery, le plugin form.js permet de gérer l’upload de fichier. Voici une « application réelle » qui m’a permis de tester cette fonction.


En utilisant le webmail de GMail j’ai remarqué que, parfois, certains fichiers attachés envoyés par mes correspondants étaient illisibles, même une fois téléchargés sur mon bureau. En les ouvrant, j’ai constaté qu’ils étaient encodés au format « appledouble », avec une partie décrivant les propriétés du fichier (son nom etc), et une autre le contenu au format base64. Comme il est possible de décoder le base64 en php, j’ai fait un petit script permettant de récupérer mes données. Restait à l’emballer dans une jolie interface Web pour qu’il soit utilisable en ligne.

Bien entendu on peut mettre n’importe quel convertisseur en ligne sur le même principe.

On peut tester l’application à l’adresse :

www.jquery.info/noname/

La page présente un formulaire d’upload de fichier tout à fait classique :

<form id="upload" action="./post.php" method="post"
   enctype="multipart/form-data">
<input type="file" name="file" />
<input type="submit" value="ok" />
</form>

C’est le script post.php qui récupère les données. Ce script renvoie, dans tous les cas, un petit morceau de HTML.

S’il reconnaît le format appledouble, il enregistre le fichier dans son répertoire tmp/, sous un nom aléatoire et unique, et renvoie un lien vers le script download.php, avec une clé permettant à ce script de retrouver notre fichier. En cas d’erreur, il renvoie le message d’erreur.

Grâce au plugin jquery.form.js, on va pouvoir traiter cette réponse en javascript à l’intérieur de notre page.

D’abord, chargeons jQuery et son plugin :

<head>
 <script src="jquery.js"
      type="text/javascript"></script>
 <script src="jquery.form.js"
      type="text/javascript"></script>
</head>

Ensuite activons le plugin sur notre formulaire :

<script type="text/javascript"><!--
$(document).ready(function() {
       $('#result')
       .hide();

       $('form#upload')
       .ajaxForm({
               beforeSubmit: function() {
                       $('#result')
                       .hide();
               },
               success: function(e) {
                       $('#result')
                       .html(e)
                       .show();
               }
       });
});
// --></script>

On voit ici qu’on a indiqué deux options au formulaire :
— la première (beforeSubmit:) indique la fonction à lancer au moment où l’on valide le formulaire (on masque la boîte de résultat, au cas où elle contiendrait un message d’erreur précédent) ;
— la seconde (success:) indique la fonction à lancer une fois la requête effectuée (c’est-à-dire, le fichier chargé) : on affiche alors le résultat dans la boîte $("#result").

Et, comment dire... c’est tout, et ça marche !

P.-S.

La documentation complète du plugin se trouve sur le site http://www.malsup.com/jquery/form/.

Et, sur ce site, un (vieil) article : Le plugin « form ».

Documents joints

Répondre à cet article

2 Messages de forum


Derniers commentaires