La Ferme du web - Les forums

Venez baraguiner avec la communauté !

Vous n'êtes pas identifié.

#51 21/05/2009 09:37:02

DJo
Administrateur
Date d'inscription: 31/07/2008
Messages: 569
Site web

Re: Tutorial: Un système de gestion d'images complet pour son site

Si tu mets: /doUpload.php
Ca sous entend que ton script PHP est à la racine de ton serveur, donc c'est comme si tu écrivais: http://patatesandco.fr/doUpload.php

Est-ce que le fichier est bien au bon endroit ?

Hors ligne

 

21/05/2009 09:37:02

Botte De Foin Publicitaire


#52 21/05/2009 09:38:00

michael
Membre
Date d'inscription: 20/05/2009
Messages: 18

Re: Tutorial: Un système de gestion d'images complet pour son site

hum...
j'ai mis des url complète partout pourtant..

Code:

script type="text/javascript" src="http://patatesandco.fr/photos/web/js/mootools.js"></script>
    <script type="text/javascript" src="http://patatesandco.fr/photos/web/js/Swiff.Uploader.js"></script>
    <script type="text/javascript" src="http://patatesandco.fr/photos/web/js/Fx.ProgressBar.js"></script>
    <script type="text/javascript" src="http://patatesandco.fr/photos/web/js/FancyUpload2.js"></script>
</head>

<body>
<script>
window.addEvent('load', function() {

    var swiffy = new FancyUpload2($('demo-status'), $('demo-list'), {
        url: $('form-demo').action,
        fieldName: 'photoupload',
        path: 'http://patatesandco.fr/photos/web/js/Swiff.Uploader.swf',
        limitSize: 2 * 2048 * 2048, // 6Mb
        onLoad: function() {
            $('demo-status').removeClass('hide');
            $('demo-fallback').destroy();
        },
        // The changed parts!
        debug: true, // enable logs, uses console.log
        target: 'demo-browse' // the element for the overlay (Flash 10 only)
    });

    filter = {'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'};
    swiffy.options.typeFilter = filter;
    /**
     * Various interactions
     */

    $('demo-browse').addEvent('click', function() {
        /**
         * Doesn't work anymore with Flash 10: swiffy.browse();
         * FancyUpload moves the Flash movie as overlay over the link.
         * (see opeion "target" above)
         */
        swiffy.browse();
        return false;
    });

    /**
     * The *NEW* way to set the typeFilter, since Flash 10 does not call
     * swiffy.browse(), we need to change the type manually before the browse-click.
     */
    $('demo-select-images').addEvent('change', function() {
        var filter = null;
        if (this.checked) {
            filter = {'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'};
        }
        swiffy.options.typeFilter = filter;
    });

    $('demo-clear').addEvent('click', function() {
        swiffy.removeFile();
        return false;
    });

    $('demo-upload').addEvent('click', function() {
        swiffy.upload();
        return false;
    });

});

</script>
<div id="header" > 
Mes images 
</div>
<form action="/doUpload.php" method="post" enctype="multipart/form-data" id="form-demo">
    <fieldset id="demo-fallback">
        <label for="demo-photoupload" class="up">
            Upload images:
            <input type="file" name="photoupload" id="demo-photoupload" />
        </label>
    </fieldset>

    <div id="demo-status" class="hide">
        <p>
            <a href="#" id="demo-browse">Explorer les fichiers</a> |
            <input type="checkbox" id="demo-select-images" checked /> Images uniquement |
            <a href="#" id="demo-clear">Effacer la liste</a> |
            <a href="#" id="demo-upload">Upload !</a>
        </p>
        <div>
            <strong class="overall-title">Progression totale</strong><br />
            <img src="http://patatesandco.fr/photos/web//images/assets/progress-bar/bar.gif" class="progress overall-progress" />
        </div>
        <div>
            <strong class="current-title">Progression du fichier</strong><br />
            <img src="http://patatesandco.fr/photos/web//images/assets/progress-bar/bar.gif" class="progress current-progress" />
        </div>
        <div class="current-text"></div>
    </div>

    <ul id="demo-list"></ul>
</form>
</body>
</html>

Code:

<?php
    include("http://patatesandco.fr/photos/class/class.upload.php");
    
  $handle = new upload($_FILES['photoupload']);
  if ($handle->uploaded) {
      // Images bien uploadées
  }
   $handle = new upload($_FILES['photoupload']);
  if ($handle->uploaded) {
      $handle->Process("http://patatesandco.fr/photos/images/");
    if ($handle->processed) {
       $handle->clean();
       // Image uploadée avec succès !
    } else {
         echo $handle->error;
      $handle->clean();
    }
  }
  
  $handle->image_max_width = 2000;
  $handle->image_max_height = 1000;
  $handle->image_max_pixels = 50000;
  $handle->image_max_ratio = 1.5;
  $handle->image_min_width = 1000;
  $handle->image_min_height = 5000;
  $handle->image_min_pixels = 20000;
  $handle->image_min_ratio = 0.5;
  $handle->image_resize = true;
  $handle->allowed = array('application/pdf','application/msword', 'image/*');
  $handle->forbidden = array('application/*');
  
    $handle = new upload($_FILES['photoupload']);
  if ($handle->uploaded) {
      $handle->image_max_width = 500;
      $handle->Process("http://patatesandco.fr/photos/web/images/");
    if ($handle->processed) {
       $handle->clean();
       // Image uploadée avec succès !
    } else {
         echo $handle->error;
      $handle->clean();
    }
  }
  
   $result = array();
  $handle = new upload($_FILES['photoupload']);
  if ($handle->uploaded) {
      $handle->image_max_width = 500;
      $handle->Process("http://patatesandco.fr/photos/web/images/");
    if ($handle->processed) {
       $handle->clean();
       $result['result'] = 'success';
       $result['size'] = utf8_encode("<strong>".$handle->file_dst_name."</strong> transféré (".$handle->image_src_x."x".$handle->image_src_y.")");
    } else {
         $result['result'] = 'failed';
       $result['error'] = $handle->error;
      $handle->clean();
    }
  }
if (!headers_sent() )
{
    header('Content-type: application/json');
}
echo json_encode($result);
exit();

Hors ligne

 

#53 21/05/2009 09:41:23

michael
Membre
Date d'inscription: 20/05/2009
Messages: 18

Re: Tutorial: Un système de gestion d'images complet pour son site

ha oui tiens pas con ce /doupload

j'ai changer pour mettre :
<form action="http://patatesandco.fr/photos/web/doUpload.php" method="post" enctype="multipart/form-data" id="form-demo">

mais pareil...

Hors ligne

 

#54 21/05/2009 09:42:49

DJo
Administrateur
Date d'inscription: 31/07/2008
Messages: 569
Site web

Re: Tutorial: Un système de gestion d'images complet pour son site

Met juste /photos/web/doUpload.php
Bon ça doit venir d'autre chose alors ... Vérifie bien tous tes chemins.

Moi j'ai toujours /doUpload.php même en faisant un refresh là

Hors ligne

 

#55 21/05/2009 09:45:28

michael
Membre
Date d'inscription: 20/05/2009
Messages: 18

Re: Tutorial: Un système de gestion d'images complet pour son site

pas mieux avec juste /photos/web/doUpload.php

a priori je dirais que me chemins sont bons (a moins que j'ai oublié un truc mais je vois pas ou...)

Hors ligne

 

#56 21/05/2009 09:47:07

michael
Membre
Date d'inscription: 20/05/2009
Messages: 18

Re: Tutorial: Un système de gestion d'images complet pour son site

Voila mes deux fichiers :

doUpload :

Code:

<?php
    include("http://patatesandco.fr/photos/class/class.upload.php");
    
  $handle = new upload($_FILES['photoupload']);
  if ($handle->uploaded) {
      // Images bien uploadées
  }
   $handle = new upload($_FILES['photoupload']);
  if ($handle->uploaded) {
      $handle->Process("http://patatesandco.fr/photos/images/");
    if ($handle->processed) {
       $handle->clean();
       // Image uploadée avec succès !
    } else {
         echo $handle->error;
      $handle->clean();
    }
  }
  
  $handle->image_max_width = 2000;
  $handle->image_max_height = 1000;
  $handle->image_max_pixels = 50000;
  $handle->image_max_ratio = 1.5;
  $handle->image_min_width = 1000;
  $handle->image_min_height = 5000;
  $handle->image_min_pixels = 20000;
  $handle->image_min_ratio = 0.5;
  $handle->image_resize = true;
  $handle->allowed = array('application/pdf','application/msword', 'image/*');
  $handle->forbidden = array('application/*');
  
    $handle = new upload($_FILES['photoupload']);
  if ($handle->uploaded) {
      $handle->image_max_width = 500;
      $handle->Process("http://patatesandco.fr/photos/web/images/");
    if ($handle->processed) {
       $handle->clean();
       // Image uploadée avec succès !
    } else {
         echo $handle->error;
      $handle->clean();
    }
  }
  
   $result = array();
  $handle = new upload($_FILES['photoupload']);
  if ($handle->uploaded) {
      $handle->image_max_width = 500;
      $handle->Process("http://patatesandco.fr/photos/web/images/");
    if ($handle->processed) {
       $handle->clean();
       $result['result'] = 'success';
       $result['size'] = utf8_encode("<strong>".$handle->file_dst_name."</strong> transféré (".$handle->image_src_x."x".$handle->image_src_y.")");
    } else {
         $result['result'] = 'failed';
       $result['error'] = $handle->error;
      $handle->clean();
    }
  }
if (!headers_sent() )
{
    header('Content-type: application/json');
}
echo json_encode($result);
exit();

et uploader.php

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <title>photos</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" href="css/template.css" type="text/css" />
    
    
    <script type="text/javascript" src="http://patatesandco.fr/photos/web/js/mootools.js"></script>
    <script type="text/javascript" src="http://patatesandco.fr/photos/web/js/Swiff.Uploader.js"></script>
    <script type="text/javascript" src="http://patatesandco.fr/photos/web/js/Fx.ProgressBar.js"></script>
    <script type="text/javascript" src="http://patatesandco.fr/photos/web/js/FancyUpload2.js"></script>
</head>

<body>
<script>
window.addEvent('load', function() {

    var swiffy = new FancyUpload2($('demo-status'), $('demo-list'), {
        url: $('form-demo').action,
        fieldName: 'photoupload',
        path: 'http://patatesandco.fr/photos/web/js/Swiff.Uploader.swf',
        limitSize: 2 * 2048 * 2048, // 6Mb
        onLoad: function() {
            $('demo-status').removeClass('hide');
            $('demo-fallback').destroy();
        },
        // The changed parts!
        debug: true, // enable logs, uses console.log
        target: 'demo-browse' // the element for the overlay (Flash 10 only)
    });

    filter = {'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'};
    swiffy.options.typeFilter = filter;
    /**
     * Various interactions
     */

    $('demo-browse').addEvent('click', function() {
        /**
         * Doesn't work anymore with Flash 10: swiffy.browse();
         * FancyUpload moves the Flash movie as overlay over the link.
         * (see opeion "target" above)
         */
        swiffy.browse();
        return false;
    });

    /**
     * The *NEW* way to set the typeFilter, since Flash 10 does not call
     * swiffy.browse(), we need to change the type manually before the browse-click.
     */
    $('demo-select-images').addEvent('change', function() {
        var filter = null;
        if (this.checked) {
            filter = {'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'};
        }
        swiffy.options.typeFilter = filter;
    });

    $('demo-clear').addEvent('click', function() {
        swiffy.removeFile();
        return false;
    });

    $('demo-upload').addEvent('click', function() {
        swiffy.upload();
        return false;
    });

});

</script>
<div id="header" > 
Mes images 
</div>
<form action="/photos/web/doUpload.php" method="post" enctype="multipart/form-data" id="form-demo">
    <fieldset id="demo-fallback">
        <label for="demo-photoupload" class="up">
            Upload images:
            <input type="file" name="photoupload" id="demo-photoupload" />
        </label>
    </fieldset>

    <div id="demo-status" class="hide">
        <p>
            <a href="#" id="demo-browse">Explorer les fichiers</a> |
            <input type="checkbox" id="demo-select-images" checked /> Images uniquement |
            <a href="#" id="demo-clear">Effacer la liste</a> |
            <a href="#" id="demo-upload">Upload !</a>
        </p>
        <div>
            <strong class="overall-title">Progression totale</strong><br />
            <img src="http://patatesandco.fr/photos/web//images/assets/progress-bar/bar.gif" class="progress overall-progress" />
        </div>
        <div>
            <strong class="current-title">Progression du fichier</strong><br />
            <img src="http://patatesandco.fr/photos/web//images/assets/progress-bar/bar.gif" class="progress current-progress" />
        </div>
        <div class="current-text"></div>
    </div>

    <ul id="demo-list"></ul>
</form>
</body>
</html>

ca semble correct  non ??

Dernière modification par michael (21/05/2009 09:48:28)

Hors ligne

 

#57 21/05/2009 09:58:35

DJo
Administrateur
Date d'inscription: 31/07/2008
Messages: 569
Site web

Re: Tutorial: Un système de gestion d'images complet pour son site

Supprime tous les http://patatesandco.fr dans ton PHP.
Il faut que tu donne le bon chemin relatif à l'endroit ou est situé ton script PHP.

Le plus simple, tu les mets tous dans le même répertoire pour tester, et les chemin du coup, ce n'est que leur nom.

Tu vois ce que je veux dire ?

Hors ligne

 

#58 21/05/2009 10:00:06

michael
Membre
Date d'inscription: 20/05/2009
Messages: 18

Re: Tutorial: Un système de gestion d'images complet pour son site

heu.. ca donne donc ca :

/photos/web/doUpload.php

?

Hors ligne

 

#59 21/05/2009 10:03:00

michael
Membre
Date d'inscription: 20/05/2009
Messages: 18

Re: Tutorial: Un système de gestion d'images complet pour son site

bon alors

j'ai mis tout les fichiers comme tu m'as dis

plus d'erreur, mais pas d'images dans les repertoires....  sad

Hors ligne

 

#60 21/05/2009 10:03:15

DJo
Administrateur
Date d'inscription: 31/07/2008
Messages: 569
Site web

Re: Tutorial: Un système de gestion d'images complet pour son site

si tu les mets tous dans le même répertoire tes scripts PHP / JS

Ca va donner: doUpload.php uniquement

include("class.upload.php");


$handle->Process("images/");

Etc..

Hors ligne

 

#61 21/05/2009 10:04:27

michael
Membre
Date d'inscription: 20/05/2009
Messages: 18

Re: Tutorial: Un système de gestion d'images complet pour son site

ha les js aussi..

ok bon je regarde ca dans la journée et je te tiens au courant..

en tout ca, merci pour ton aide et ta présence !!!!!

Hors ligne

 

#62 21/05/2009 10:39:53

michael
Membre
Date d'inscription: 20/05/2009
Messages: 18

Re: Tutorial: Un système de gestion d'images complet pour son site

bon j'ai donc tout mis dans le rep web

et collez des chemins du style : src="mootools.js

mais toujours pareil.. pas d'erreur, mais pas d'images dans le repertoire images (ni .orig, ni .mini)

Hors ligne

 

#63 22/05/2009 10:10:55

michael
Membre
Date d'inscription: 20/05/2009
Messages: 18

Re: Tutorial: Un système de gestion d'images complet pour son site

bonjour
c'est encore moi smile

bon cette fois tout fonctionne..
et ca c'est cool smile

par contre j'ai une question: est-il possible de faire en sorte qu'une fois les images uppé on puise les voir directement sur la page ?

Encore merci...

Hors ligne

 

#64 22/05/2009 10:29:32

DJo
Administrateur
Date d'inscription: 31/07/2008
Messages: 569
Site web

Re: Tutorial: Un système de gestion d'images complet pour son site

Ben oui mais faut que tu mettes la main à la patte et que tu le programme wink

Hors ligne

 

#65 22/05/2009 10:34:04

michael
Membre
Date d'inscription: 20/05/2009
Messages: 18

Re: Tutorial: Un système de gestion d'images complet pour son site

mouais autrement dis, c'est pas gagné smile

bon sinon j'ai encore une question :  l'uppload marche bien, mais si mon fichier depasse  2Mo ca plante ( en fait j'ai bien l'image originale dans le repertoire, mais pas les autres...)
j'ai regarder le fichier de config de mon hebergeur, limite a 35Mo sais tu d'ou cela peut venir ?

Hors ligne

 

#66 22/05/2009 10:36:22

michael
Membre
Date d'inscription: 20/05/2009
Messages: 18

Re: Tutorial: Un système de gestion d'images complet pour son site

en fait meme avec un fichier de 1.7Mo ca plante...

Hors ligne

 

#67 22/05/2009 11:46:34

michael
Membre
Date d'inscription: 20/05/2009
Messages: 18

Re: Tutorial: Un système de gestion d'images complet pour son site

donc je confirme, dès qu'un fichier est trop gros, il y a un soucis, l'image est bien envoyé, sauvegardé en taille normale, mais pas de resize dessus...

Hors ligne

 

#68 22/05/2009 12:57:39

DJo
Administrateur
Date d'inscription: 31/07/2008
Messages: 569
Site web

Re: Tutorial: Un système de gestion d'images complet pour son site

Il faut que tu augmente la capacité d'upload dans ton fichier php.ini

Hors ligne

 

#69 22/05/2009 13:25:21

michael
Membre
Date d'inscription: 20/05/2009
Messages: 18

Re: Tutorial: Un système de gestion d'images complet pour son site

le fichier est bien upploadé, c'est le resize qui ne se fait pas...

Hors ligne

 

#70 09/06/2009 23:05:33

mrfruit
Membre
Date d'inscription: 09/06/2009
Messages: 2

Re: Tutorial: Un système de gestion d'images complet pour son site

Bonjour à tous,

euh, j'ai un énorme problème : l'upload marche, la redimension marche, l'animation swiff upload marche mais, il ne m'affiche pas le Jcon, je n'ai donc pas de confirmation de réussite ou de non réussite, et je comprend pas d'où ça peut venir.

Quelqu'un peut-il m'aider ?

Hors ligne

 

#71 10/06/2009 13:37:29

DJo
Administrateur
Date d'inscription: 31/07/2008
Messages: 569
Site web

Re: Tutorial: Un système de gestion d'images complet pour son site

Sans doute à cause de ta version PHP.
Car la fonction JSON_Encode nécessite une certaine version de PHP.

PHP5 >

Hors ligne

 

#72 12/06/2009 02:02:32

mrfruit
Membre
Date d'inscription: 09/06/2009
Messages: 2

Re: Tutorial: Un système de gestion d'images complet pour son site

Merci, mais ça marche toujours pa, tant pis.

Cependant, ce qui m'ennuie le plus, c'est que FancyUploader ne marche pas sous IE 7 oO Est-ce normal ? Peut-on faire quelque chose pour que IE accepete FancyUploader ?

Hors ligne

 

#73 24/07/2009 11:17:28

worldonfire
Membre
Date d'inscription: 24/07/2009
Messages: 1

Re: Tutorial: Un système de gestion d'images complet pour son site

Hello,

Cela marche chez moi, nikel :-) (Merci pour l'excellent tuto d'ailleurs)

Par contre j'ai une question à laquelle je n'arrive pas à trouver solution :

J'ai installer l'uploader dans un formulaire qui permet de saisir d'autres informations (à part l'attachement des extracts).
Lors du submit du formulaire (Apres upload des extracts qui se passe bien); s'il y a des erreur sur les autres champs (type username, password ...) le site renvoie le formulaire avec les erreurs.
Ma question est : si l'utilisateur a deja uploader des fichier, est ce que je peux remettre la liste des fichiers dans fancyupload ? En d'autres termes, est ce que je peux initialiser l'uploader avec une liste de fichier ?

Merci d'avance

Hors ligne

 

#74 24/07/2009 11:40:41

DJo
Administrateur
Date d'inscription: 31/07/2008
Messages: 569
Site web

Re: Tutorial: Un système de gestion d'images complet pour son site

Hum je vois ton problème, je ne penses pas que ce soit prévu de pouvoir remettre la liste nativement dans le plugin. Mais à mon avis, ce n'est pas trop compliqué à faire, il suffit de générer du HTML, regarde ce que ca donne avec FireBug quand tu charge des fichiers et fais pareil big_smile

Bon courage !

Hors ligne

 

#75 01/08/2009 20:37:00

jonjon83
Membre
Date d'inscription: 01/08/2009
Messages: 3

Re: Tutorial: Un système de gestion d'images complet pour son site

Salut,

Merci pour ce tuto, tout fonctionne nikel !
J'aurais quand même une petite question : en fait je voudrais rajouter un champ dans la popup uploader.php qui me permettrai de préciser le nom du dossier créé.

J'ai donc ajouté un champ input :

Code:

<form action="./doUpload.php" method="post" enctype="multipart/form-data" id="form-demo">
    <fieldset id="demo-fallback">
        <label for="demo-photoupload">
            Upload images:
            <input type="file" name="photoupload" id="demo-photoupload" />
            
        </label>
    </fieldset>
    
    <div id="demo-status" class="hide">
        <p>
            Nom de l'album : <input name='album_name' type='text' <br />
            <a href="#" id="demo-browse">Explorer les fichiers</a> |
            <input type="checkbox" id="demo-select-images" checked /> Images uniquement |
            <a href="#" id="demo-clear">Effacer la liste</a> |
            <a href="#" id="demo-upload">Upload !</a>
        </p>

j'aimerais récupérer la valeur de ce champ dans doUpload.php comme ceci :

Code:

    $dir_name=$_POST["album_name"];

mais cela ne fonctionne pas...
il me semblait que le fait que mon champ input soit dans un formulaire suffise à utiliser les variables POST...
La réponse est peut être sous mes yeux mais je ne suis pas un expert en PHP tongue

voila je sais bien que ce n'est pas directement lié au tuto, mais ça peut être une amélioration intéressante je pense.

Merci d'avance big_smile

Hors ligne

 

Pied de page des forums

Powered by FluxBB
© Copyright 2008-2009 - LaFermeduWeb.net