skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

samedi 11 avril 2009

Plugin jQuery pour upload de fichiers multiples

Publié par Infinite Loop, à 11 h 49 1 commentaire

Plus tôt cette semaine, j'ai fait quelques tests avec PHP et l'extension APC dans le but de créer un contrôle d'upload de fichiers, avec une barre de progression en temps réel. Suite à mes expériences, je n'ai trouvé aucun moyen simple de pouvoir sélectionner plusieurs fichiers en même temps pour les envoyer au serveur. La conclusion de mes lectures a été que je devais développer un contrôle en Java, ou encore controurner le problème en utilisant une boîte de dialogue lancée par Flash.

Mon idée était de développer un petit composant capable de sélectionner plusieurs fichiers, de les envoyer au serveur et de montrer la progression de l'envoi à l'utilisateur pour qu'il patiente pendant le transfert. J'avais l'intention d'utiliser PHP, APC, jQuery et un objet jQuery UI progress bar mais avant de me lancer dans un développement qui aurait pu prendre plusieurs heures, je me suis dit qu'il vaudrait mieux jeter un oeil aux solutions déjà existantes. Et je crois avoir bien fait car je suis tombé par hasard sur une solution qui réglait la plupart de mes problèmes d'un seul coup, configurable et que je pouvais utiliser comme base pour mon développement.

Il s'agit d'un plugin jQuery nommé Uploadify, développé par Ronnie Garcia, qui peut être utilisé sous licence GPL et MIT. Comme le sélectionneur de fichiers est lancé par Flash, on peut en choisir plusieurs en même temps. De plus, la source fla et le swf sont inclus dans le zip de téléchargement. On peut aussi restreindre le type (par les extensions) et la taille des fichiers, choisir le répertoire de dépôt, contrôler les comportements à chacune des étapes et modifier l'apparence (CSS, textes et traductions, etc). Mieux encore, aucun besoin de patenter le tout avec APC pour obtenir la barre de progression!

Vous verrez, c'est étonnant à quel point c'est facile à installer. Décompressez l'archive dans votre projet (par exemple le répertoire "uploadify"). Dans votre page, faites référence aux scripts de base :

<script type="text/javascript" src="uploadify/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="uploadify/jquery.uploadify.js"></script>
Dans le code HTML, créez un DIV pour contenir le contrôle et assignez lui un ID unique. Ça peut être tout simplement quelque chose comme ceci :
<div id="fileUpload"></div>
Créez ensuite un bouton qui servira à lancer le transfert :
<input type="button" id="buttonSubmit" value="Envoyer" />
Pour terminer, initialisez le contrôle et attachez l'événement au bouton. Dans fileUpload, chaque propriété permet de personnaliser le comportement du contrôle :
  • uploader : le contrôle Flash qui permet la sélection des fichiers
  • script : le script qui prend en charge l'enregistrement des fichiers. Il y en a un de base fournit par défaut qu'on peut utiliser et modifier au besoin.
  • folder : le répertoire où déposer les fichiers
  • cancelImg : l'icône du X pour annuler la sélection d'un fichier
  • buttonText : le texte sur le bouton. J'en profite pour le mettre en français
  • multi : excellent, je peux choisir plusieurs fichiers à la fois!
Lorsqu'on cliquera sur le bouton buttonSubmit, on lancera la fonction fileUploadStart() qui débutera le transfert.
<script type="text/javascript">
function initialize() {
$('#"fileUpload"').fileUpload({
'uploader': 'uploadify/uploader.swf',
'script': 'uploadify/upload.php',
'folder': 'uploaded_files',
'cancelImg': 'uploadify/cancel.png',
'buttonText': 'Choisir un fichier',
'multi': true
});

// attacher l'événement au bouton
$('#buttonSubmit').click(
function() {
$("#filepicker").fileUploadStart();
}
);
}

$(document).ready( initialize );
</script>
Facile, n'est-ce pas ? Enfin, presque. J'ai quand même quelques conseils à vous donner pour finaliser l'installation :
  • Si vous voulez voir tout l'interface dans une langue autre que l'anglais, il faudra apporter au moins une modification au fichier source jquery.uploadify.js. Dans la version non compressée, il faudra changer certaines traductions car elles ne sont pas encore personnalisables. Je viens justement d'écrire à l'auteur pour lui faire la proposition.

    - Ligne 175, la phrase "Do you want to replace the file"
    - Ligne 216, le terme "Completed"
    - Les unités de mesures KB et MB, entre les lignes 130 et 140

  • Comme mon serveur est configuré avec des répertoires virtuels, j'ai dû changer l'utilisation des fichiers proposés upload.php et check.php pour ne pas tenir compte de la variable $_SERVER['DOCUMENT_ROOT']
  • Ne pas oublier de placer le CSS, sinon vous ne verrez pas apparaître la barre de progression :-)

    <link type="text/css" href="uploadify/uploadify.css" rel="Stylesheet" />


Tags: JavaScript

1 réponse à "Plugin jQuery pour upload de fichiers multiples"

  1. Infinite Loop a dit...
    11 avril 2009 à 12 h 18

    Ma proposition dans leur forum:

    Hi guys,

    I'm a french canadian programmer and I use the Uploadify component in my project. Great work!
    But I was surprised that there is no way to specify the language yet.

    Would it be a good idea to create a new configuration key, like :

    $('#"fileUpload"').fileUpload({
    'language': 'fr', // default value would be english when unspecified

    'uploader': 'uploader.swf',
    'script': 'upload.php',
    'folder': 'my_files',
    'cancelImg': 'cancel.png',
    });

    I see those possible translations in the uncompressed version of the jquery.uploadify.js file :
    - Line 175, sentence "Do you want to replace the file"
    - Line 216, "Completed"
    - Measures units (KB and MB) between lines 130 and 140

    This might be implemented easily with a hash table :

    translations['replace_sentence'] = 'Do you want to replace the file';
    translations['completed'] = 'Completed';
    translations['unit_kb'] = 'KB';
    translations['unit_mb'] = 'MB';

    Let me know if you need help on this.


Publier un commentaire

Message plus récent Messages plus anciens Accueil
S'abonner à : Publier des commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (56)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ►  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ►  février 2012 (15)
      • ►  janvier 2012 (12)
    • ►  2011 (146)
      • ►  décembre 2011 (14)
      • ►  novembre 2011 (11)
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ►  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ►  octobre 2010 (32)
      • ►  septembre 2010 (34)
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ►  juin 2010 (42)
      • ►  mai 2010 (36)
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ▼  2009 (430)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ►  juin 2009 (38)
      • ►  mai 2009 (37)
      • ▼  avril 2009 (35)
        • Coeur de pirate
        • Photos des développeurs d'OpenOffice
        • Audiotool, studio musical en Flash
        • Compresser TinyMCE
        • Compression HTTP avec GZip
        • Citation no. 27 sur les geeks
        • Compter sur ses doigts
        • Disque dur externe
        • Cocher toutes les cases d'un formulaire
        • Plugin mp3 Fluendo sur Fedora
        • Ajouter du support mp3 à Fedora 10
        • Injection sur PostgreSQL
        • Préférer la balise button à un bouton de formulaire
        • Citation no. 26 sur les logiciels gratuits
        • Écrire du texte à l'envers
        • Amazon = rapide !
        • Amazon.ca en français
        • Centrer un objet dans la page en CSS
        • La fonction PHP la moins utilisée
        • PHP CLI
        • Filtrer une liste de fichiers avec glob
        • Image style Polaroid avec ImageMagick
        • Citation no. 25 sur le langage de programmation pa...
        • Plugin jQuery pour upload de fichiers multiples
        • Comparer des fichiers avec Dreamweaver
        • Compatibilité Internet Explorer 8
        • Temps de chargement d'une page web
        • Installer APC sur Windows
        • Encore une fois Vidéotron...
        • Shazam et SnapTell
        • Citation no. 24 sur le parachutisme
        • Définir une séquence PostgreSQL
        • Pro PHP
        • J is null dans Prototype
        • Poisson d'avril 2009
      • ►  mars 2009 (37)
      • ►  février 2009 (32)
      • ►  janvier 2009 (39)
    • ►  2008 (84)
      • ►  décembre 2008 (34)
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft