Magazine Internet

Fancy Upload : installation

Publié le 17 novembre 2007 par Tonylepsie

Suite à notre présentation du plugin Fancy Upload, voici (à la demande générale ^^) une procédure d’installation simplifiée, étape par étape !

1. Téléchargement et installation de mootools : rendez vous tout d’abord sur la page de téléchargement de mootools, et téléchargez la dernière version en cours (v1.1 ou supérieure nécéssaire).
Les classes Class.Extras, Element.Event, Element.Selectors, Fx.Style, Fx.Transitions sont nécéssaires.
Une fois téléchargée, placez la à l’endroit désiré sur votre serveur et appellez le de la manière suivante :

Script javascript

    <script src="inc/mootools-release-1.11.js"></script>

2. Téléchargement et installation de Fancy Upload : téléchargez les fichiers FancyUpload.js, Swiff.Base.js, Swiff.Uploader.js, Swiff.Uploader.swf chez digitarald.de.
De la même manière que précedemment, on appelle les trois premiers fichiers

Script javascript

    <script type="text/javascript" src="/inc/fancyupload/Swiff.Base.js"></script>
    <script type="text/javascript" src="/inc/fancyupload/Swiff.Uploader.js"></script>
    <script type="text/javascript" src="/inc/fancyupload/FancyUpload.js"></script>

D’une manière globale, je conseille l’installation du plugin Firebug pour Firefox, qui vous permet notemment de vérifier si tous les éléments appelés par votre page ont étés correctement chargés (de toute façon, c’est un super plugin il fait partie de notre selection)

Voila, on passe aux choses sérieuses

3. Initialisation de l’uploader :
Primo, installer cette fonction javascript dans le header de votre page

Script javascript

<script type="text/javascript">
                //<![CDATA[

                window.addEvent(‘load’, function()
                {
                        /*
                         * ! Attention, si vous changez les noms de classes, ne pas oublier de les changer dans cette fonction également !
                         */

                        var input = $(‘photoupload-filedata-1′);

                        /*
                         * swf: chemin vers le swf
                         * container: les infos seront stockées dans ce conteneur
                         *
                         */

                        var uplooad = new FancyUpload(input, {
                                swf: ’swiff/Swiff.Uploader.swf’,
                                queueList: ‘photoupload-queue’,
                                container: $(’swfcontainer’)
                        });

                        $(‘photoupload-status’).adopt(new Element(‘a’, {
                                href: ‘javascript:void(null);’,
                                events: {
                                        click: uplooad.clearList.bind(uplooad, [false])
                                }
                        }).setHTML(‘Clear Completed’));

                        var uplooad2 = new FancyUpload($(‘photoupload2-filedata-1′), {
                                swf: ’swiff/Swiff.Uploader.swf’,
                                queueList: ‘photoupload-queue-2′
                        });
                });

                //]]>
        </script>

Secundo, préparer dans le corps de votre page un élément conteneur, de préférence vide, qui va permettre de stocker des informations.
Dans notre exemple, nous avons créé une balise div appellée “swfcontainer”. Placez le de préférence avant ce qui va suivre.
Tertio, il vous faudra préparer un formulaire …

Script xhtml

    <div id="swfcontainer"></div>
    <form action="mass_upload.php" method="post" id="photoupload" enctype="multipart/form-data">
        <input type="file" name="Filedata" id="photoupload-filedata-1" />
        <div class="halfsize">
                <fieldset>
                        <legend>File d’attente</legend>
                        <div class="note" id="photoupload-status">Vérifiez les fichiers puis commencez l’envoi</div>
                        <ul class="photoupload-queue" id="photoupload-queue">
                                <li style="display: none" />
                        </ul>
                </fieldset>
        </div>
       <div class="footer">
                <input type="submit" class="submit" id="profile-submit" value="Commencer l’upload"/>
        </div>
     </form>

Ne pas oublier de changer les noms de classes appellées dans la fonction Javascript précédente, si vous les changer dans ce formulaire.

4. Création du fichier Php d’upload :
Il vous faudra enfin créer le fichier php qui sera appellé par Fancy Upload pour envoyer les fichiers sur le serveur.
Voici pour exemple une procédure d’installation simple & classique, à vous de faire comme vous les sentez

Script php

$path = ‘/inc/data/upload/’;

// upload image
 if (is_uploaded_file($_FILES[‘Filedata’][‘tmp_name’])) {
    $source_file = $path.($_FILES[‘Filedata’][‘name’]);
    move_uploaded_file($_FILES[‘Filedata’][‘tmp_name’], $source_file);
    }


Retour à La Une de Logo Paperblog

LES COMMENTAIRES (2)

Par Jo
posté le 24 novembre à 15:56
Signaler un abus

J'ai essayé aussi fonctionne pas non plus.

Par fred
posté le 03 septembre à 16:09
Signaler un abus

Ben ça ne fonctionne pas... D'ailleurs je ne vois pas de CSS pour le xhtml :(

A propos de l’auteur


Tonylepsie 3 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Dossier Paperblog