La Ferme du web - Les forums

Venez baraguiner avec la communauté !

Vous n'êtes pas identifié.

#1 09/02/2009 19:38:34

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

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

Topic officiel de support pour le tutorial: "Un système de gestion d'images complet pour son site".

http://www.lafermeduweb.net//images/billets/2009-02/.orig/tuto_gestion_image_uploader_php.jpg



Objectif de ce tutorial

    * Uploader une ou plusieurs images d'un coup à partir de son pc
    * Redimensionner automatiquement et traiter les images uploadées (Version watermark et version originale)
    * Ajouter un explorateur d'images pour pouvoir les insérer dans nos billets / articles avec TinyMCE

Plan du tutorial:

    * Mise en place de la popup d'Upload
    * Utilisation d'une classe d'Upload pour gérer l'upload des images
    * Création des images redimensionnées et avec watermark
    * Modification d'un plugin TinyMCE pour l'exploration et l'insertion de nos images


Support et observations

N'hésitez pas à poser vos questions et observations dans ce topic.
Aucun support sur les commentaires ne sera fourni.

Hors ligne

 

09/02/2009 19:38:34

Botte De Foin Publicitaire


#2 13/02/2009 02:17:20

Double-C
Membre
Date d'inscription: 09/01/2009
Messages: 10
Site web

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

Super tuto, j'adore l'idée et je pense en avoir besoin rapidement, j'ai néanmoins rencontré un énorme paquet de problèmes que j'ai résolu (notamment les notations des chemins pour les images, scripts...) mais 2 erreurs subsistent:

- La barre de progression ne se remplie pas (même si le pourcentage lui augmente et que l'image est uploadée)
- Le script bloque sur la miniaturisation de l'image, il refuse l'upload à partir de l'insertion des propriétés suivantes :
$handle->image_resize         = true; 
$handle->image_ratio_crop = true; 
$handle->image_x        = 100; 
$handle->image_y        = 100;


En tout cas merci pour ce tuto, j'espère réussir à démêler l'histoire pour me resservir de tout ca big_smile

Hors ligne

 

#3 13/02/2009 11:59:07

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

Quels problèmes a tu résolu ? Des problèmes à cause du tuto ? Ou alors parce que tu n'avais pas mis les bons chemins ? (Histoire que je corrige si problème il y'a).

-> Barre de progression: Est-ce que tu as bien l'image dédiée ? Regarde si tu as bien mis le bon chemin dans le CSS aussi. Et dans le HTML. Si je ne me trompe pas il s'agit de /assets/progress-bar/progress.gif

-> Quelles sont les erreurs qu'il te sort ? Fait moi voir un echo $handle->error; après le Process de ta miniature.

Hors ligne

 

#4 13/02/2009 12:10:49

Double-C
Membre
Date d'inscription: 09/01/2009
Messages: 10
Site web

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

Après plusieurs tests, il s'avère que c'est cette ligne qui pose problème :
$handle->image_ratio_crop     = true;
Le crop n'a pas l'air de vouloir fonctionner...

Mon principal problème avant se situé dans les chemins relatifs, le tuto est écrit avec des chemins relatifs du style : "/directory/file.ext" alors que ma config ne semble accepter que les chemins du type : "./directory/file.ext", je ne sais pas pourquoi, peut être une histoire de mac/linux/windows...

Hors ligne

 

#5 13/02/2009 12:19:27

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 normalement si tu mets le path Absolu complet, il n'y'a aucuns soucis de chemin, bizare !

Tu peux pas me filer le logs d'erreurs ? Je vois pas pourquoi ça marche pas le ratio_crop.

Hors ligne

 

#6 13/02/2009 14:40:58

Double-C
Membre
Date d'inscription: 09/01/2009
Messages: 10
Site web

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

Tout ceci m'a l'air très aléatoire, une seule photo a passé l'étape du crop puis plus rien, de plus je ne trouve aucun log de cette erreur, où doit-elle se trouver?

Hors ligne

 

#7 13/02/2009 16:02:05

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 fasse un
echo $handle->error;
après le Process de ta version qui plante.
(rajoute un exit(); après si tu la vois pas)

Il n'y'a rien d'aléatoire normalement, tout fonctionne impeccablement chez moi smile

Hors ligne

 

#8 13/02/2009 18:04:39

Double-C
Membre
Date d'inscription: 09/01/2009
Messages: 10
Site web

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

if ($handle->uploaded)
{
    $handle->Process("./images/orig/");
    // Création de l'image miniature
    $handle->image_resize        = true;
    $handle->image_ratio_crop     = true;
    $handle->image_x            = 100;
    $handle->image_y            = 100;
    $handle->Process("./images/mini/");
    echo $handle->error;
    exit();

etc...


Aucune erreur ne s'affiche, je pense que c'est la preuve qu'il y a un blocage. Par contre, j'ai une photo et une seule dans toutes celles que j'ai essayé qui marche correctement, j'avoue ne pas comprendre big_smile

Hors ligne

 

#9 14/02/2009 18:35:16

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

COmmente l'étape 3 pour que ça retourne l'erreur dans l'uploader directement.

Hors ligne

 

#10 19/02/2009 10:56:19

trigone
Membre
Date d'inscription: 19/02/2009
Messages: 3

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

salut

très bon tuto

mais moi quand je click sur le lien pour avoir la boite de dialogue sa me renvoi un alert error et c tous

une idée

merci de votre aide!

Hors ligne

 

#11 19/02/2009 11:08:54

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

Quelle boite de dialogue ? La popup d'upload ?
Ca te renvois quoi comme erreur ?

Hors ligne

 

#12 19/02/2009 11:22:44

trigone
Membre
Date d'inscription: 19/02/2009
Messages: 3

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

quand je click sur Explorer les fichiers  sa m'affiche un message d'erreur "error" mais je vien de m'apercevoir que il n'afiche ce message que sur mon navigateur sur un autre pc sa marche... pourtant j'ai  Flash Player 10.0.12.36

et mon navigateur est mozilla

il me fait la meme chose sous internet explorer sur mon pc

Dernière modification par trigone (19/02/2009 11:23:36)

Hors ligne

 

#13 19/02/2009 16:01:06

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 prendre la dernière version de Fancy Upload spécialement conçue pour Flash player 10

Hors ligne

 

#14 19/02/2009 20:28:14

trigone
Membre
Date d'inscription: 19/02/2009
Messages: 3

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

en meme temp meme la vertion sur le showcase ne marche pas chez moi

Hors ligne

 

#15 20/02/2009 10:01:59

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

Ici: http://digitarald.de/project/fancyuploa … eue-fixed/
Sinon c'est que ton Flash n'est pas à jour.

Hors ligne

 

#16 27/02/2009 12:59:11

nagero
Membre
Date d'inscription: 27/02/2009
Messages: 1

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

salut j'ai un problème avec la page uploader.php je crois que c'est au niveau de l'envoi de la photo . Voici mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>

<script type="text/javascript" src="/js/mootools.js"></script>
    <script type="text/javascript" src="/js/Swiff.Uploader.js"></script>
    <script type="text/javascript" src="/js/Fx.ProgressBar.js"></script>
    <script type="text/javascript" src="/js/FancyUpload2.js"></script>
      <title> Bienvenue </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<link rel="stylesheet" type="text/css" href="style.css"/>

</head>
<body>
 
<div id="corps">
<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>
            <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="/images/progress-bar/bar.gif" class="progress overall-progress" />
        </div>
        <div>
            <strong class="current-title">Progression du fichier</strong><br />
            <img src="/images/progress-bar/bar.gif" class="progress current-progress" />
        </div>
        <div class="current-text"></div>
    </div>

    <ul id="demo-list"></ul>
</form>
</div>

</body>

</html>

Qu'en pensez vous ?? je ne trouve pas la solution pouvez vous m'aider ??

Dernière modification par nagero (27/02/2009 13:00:09)

Hors ligne

 

#17 03/03/2009 15:47:04

jelie
Membre
Date d'inscription: 02/03/2009
Messages: 7

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

trigone a écrit:

quand je click sur Explorer les fichiers  sa m'affiche un message d'erreur "error" mais je vien de m'apercevoir que il n'afiche ce message que sur mon navigateur sur un autre pc sa marche... pourtant j'ai  Flash Player 10.0.12.36

et mon navigateur est mozilla

il me fait la meme chose sous internet explorer sur mon pc

Idem pour moi, lorsque je clique sur "Explorer les fichiers" sous FireFox --> boite d'alerte "erreur';
Et sous Ie, il faut que je recharge deux fois la page pour que cela puisse marcher.
Bien que tout les fichiers soit a jour. Je teste par contre mes fichiers en local

Si trigone a trouver une solution ?


EDIT : Je ne sais pas ce que j'ai changé, mais ca marche .... smile
Après réflexion, tu as surement raison, j'ai changé de fichier entre deux, ca devait etre Fancy Upload pour Flash 10

Dernière modification par jelie (03/03/2009 19:23:47)

Hors ligne

 

#18 03/03/2009 18:58:23

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

Ca ne viens pas de la version de votre Flash ?
Vous êtes sûrs d'avoir pris la version de FancyUpload pour Flash 10 ?

Hors ligne

 

#19 03/03/2009 18:59: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

nagero a écrit:

salut j'ai un problème avec la page uploader.php je crois que c'est au niveau de l'envoi de la photo .

Qu'en pensez vous ?? je ne trouve pas la solution pouvez vous m'aider ??

Il faut que tu m'en dise plus sur ton problème !
Quelle est l'erreur ? Qu'est ce qui marche ? Qu'est-ce qui ne marche pas ?

Hors ligne

 

#20 05/03/2009 16:47:52

anarta
Membre
Lieu: Entre Orléans et Chateaudun
Date d'inscription: 05/03/2009
Messages: 45

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

Bonjour, je suis nouveaux sur le site et j'essaye de faire le tutoriel pour uploader des images sur un site. Mais voila, j'ai un souci, je choisi l'image que je veux envoyer pas de probleme mais lorsque je clique sur envoyer firefox me demande d'enregistrer le fichier doUpload.php

J'ai vu que c'était a cause de mon include qui est dans le fichier doUpload:
 
    include("classupload.php");

Alors ma question c'est pourquoi ça fait ça? Je travaille en local avec easyphp, le fichier classupload est peut etre trop long!


Petite précision: le fichier doUpload que j'enregistre contient:
<br />
<b>Notice</b>:  Undefined index:  photoupload in <b>C:\Program Files\EasyPHP 3.0\www\testuploadimg\web\doUpload.php</b> on line <b>4</b><br />
[]

j'ai donc rajouter un bouton submit dans mon formulaire et quand je clique dessus il me demande toujours d'enregistrer le fichier doUpload.php mais l'image est bien transféré dans mon répértoire.

le fichier doUpload que j'enregistre contient alors:
{"result":"success","size":"<strong>jean1.jpg<\/strong> transf\u00e9r\u00e9 (400x600)"}

Ça doit dire que c'est bon, mais je voudrais toujours que la fenetre me demandant d'enregistrer le fichier s'ouvre.

Dernière modification par anarta (06/03/2009 10:04:58)

Hors ligne

 

#21 06/03/2009 10:07:04

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

T'es sur d'avoir bien mis les balises PHP dans les fichiers ?:
<?php ?>

Hors ligne

 

#22 06/03/2009 10:29:35

anarta
Membre
Lieu: Entre Orléans et Chateaudun
Date d'inscription: 05/03/2009
Messages: 45

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

OUI j'ai bien mis les balises, j'ai continue le tuto l'image s'enregistre bien, la miniature est cree mais il me demande toujours si je veux enregistrer le fichier.

J'ai aussi du mal sur la dernière partie du tuto avec l'utilisation de tinyMCE, je vois pas ou il faut faire le lien entre le module image et la fonction Uploadimage que l'on a créé avant.

Ça ne me demande plus si je veux enregistrer le fichier lorsque je mets les dernières lignes du fichier doUpload en commentaire, je ne sais meme pas ce qu'elle signifie; sont-elles importantes?

     //if (!headers_sent() ) 
     //{ 
      //   header('Content-type: application/json'); 
     //} 
    //echo json_encode($result); 
//exit();

Dernière modification par anarta (06/03/2009 13:58:04)

Hors ligne

 

#23 06/03/2009 16:22: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

Ah tu dois avoir un problème avec ton serveur web je suppose.

Les dernières lignes permettent à l'uploader de recevoir les informations sur la progression de l'upload... Donc c'est tout de même assez important, mais à toi de voir.

Pour comprendre la tête qu'a la page, regarde mon dernier billet sur ScreenToaster, dans la démo je montre en screencast mon interface d'admin.

Le lien vers la popup pour uploader des images et ensuite, TinyMCE avec le bouton pour appeler le module d'images.

Quelle est ta version de PHP ? Il faut PHP 5.2.* pour JSON apparement

Hors ligne

 

#24 06/03/2009 16:40:17

anarta
Membre
Lieu: Entre Orléans et Chateaudun
Date d'inscription: 05/03/2009
Messages: 45

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

Merci pour vos reponses et le temps que vous passez dessus. Ma version de php est bonne, j'ai essaye egalement avec wamp mais ça fait pareil. Je vais tenter d'integrer un autre plugin comme ibrowser ou imanager ce sera peut être plus simple! Mais c'est bientot le week-end alors je crois que je verrais ça lundi.

Hors ligne

 

#25 06/03/2009 17:00:57

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

En fait je comprends pas quel est le problème exact.

C'est quand tu fais quoi que ça te demande de télécharger le fichier ? Et quel fichier ça te demande de télécharger ?
C'est bien pendant l'upload d'une image ?

Hors ligne

 

Pied de page des forums

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