[Galerie] Affichage d'images aprés upload

**groskanel** · 22/05/2009, 15h16

Bonjour

Grace a un tuto trouvé sur le web, j'ai réaliser un systeme d'uppload d'image qui reduit automatiquement les images dans deux formats..

tout marche parfaitement, mais une fois l'image envoyé sur le serveur, j'aimerais que la page ou l'on envois l'image, me montre le résultat (a savoir les deux images crées..)

je ne vois pas comment faire, quelqu'un aurait il une idée ?

Merci.

**sabotage** · 22/05/2009, 16h09

A quel niveau se situe ta difficulté ?

Invité · 22/05/2009, 16h22

J'espère que tu as utilisé mon tuto !
Fonctions de redimensionnement d'images :
http://j-reaux.developpez.com/tutori...sionner-image/

**groskanel** · 22/05/2009, 18h57

mon souci se situe au niveau de l'affichage de l'image venant juste d'etre uppé, je voudrais qu'une fois envoyé sur le serveur et redimensionnée on puisse la voir juste en dessous...

@jreaux62 : non désolé ce n'est pas le tiens (qui me semble bien plus élaborer puisque le mien ne se sert pas de base de données..

**sabotage** · 22/05/2009, 19h04

J'ai bien compris ce que tu voulais faire mais qu'est ce qui te bloque pour le faire ?
Il s'agit juste d'ecrire le code HTML pour une image, le contexte ne rend pas la chose plus difficile.

Invité · 22/05/2009, 19h08

Peu importe que tu aies une BD ou non.
A priori, je ne vois pas de problème ...

Il te suffit d'"aller chercher" les images dans les répertoires où tu les as enregistrées, et d'afficher :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
grande photo : <img border="0" src="rep_grande-photo/grande-photo.jpg" alt="">
<br />
petite photo : <img border="0" src="rep_petite-photo/petite-photo.jpg" alt="">

**groskanel** · 22/05/2009, 19h14

ha ok
j'ai du mal m'exprimé alors..

ce que je veux c'est afficher l'image une fois uppé (qui peut avoir n'importe quel nom)
et mon souci est la.. si je met :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
grande photo : <img border="0" src="rep_grande-photo/grande-photo.jpg" alt="">
<br />
petite photo : <img border="0" src="rep_petite-photo/petite-photo.jpg" alt="">

cela ne m'affiche que l'image dont le nom est petite-photo...

ce que je voudrais c'est un systeme qui recuperait le nom automatiquement pour allez chercher l'image et ainsi l'afficher...

vous voyez ?

**sabotage** · 22/05/2009, 19h23

Tu remplaces le nom fictif donné dans cet exemple par ta variable contenant le nom de l'image.

**groskanel** · 22/05/2009, 19h24

justement c'est la variable que je ne connais pas.... je ne vois pas quoi mettre

**sabotage** · 22/05/2009, 19h25

ba c'est dans ton code d'upload que tu as défini le nom du fichier.

Invité · 22/05/2009, 19h26

Au moment où tu enregistres les photo et picto, tu dois bien avoir une idée de leur nom (?!?), et du nom des répertoires où les images sont enregistrés !

A la rigueur, tu les conserves dans des variables :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<?php
$nom_grande_photo = ...;
$nom_petite_photo = ...;
?>
grande photo : <img border="0" src="rep_grande-photo/<?php echo $nom_grande_photo; ?>" alt="">
<br />
petite photo : <img border="0" src="rep_petite-photo/<?php echo $nom_petite_photo; ?>" alt="">

**groskanel** · 22/05/2009, 19h29

non non non

en fait, si par exemple, c'est toi qui upp une image sur le site, je ne vais pas connaitre le nom que tu as donnée a ton image..

je voudrais néamoins pouvoir l'afficher apres l'upp sur la page

je suis plus clair ?

ha zut on s'est croisé, je test ca de suite

Invité · 22/05/2009, 19h31

Envoyé par groskanel

je suis plus clair ?

NON.
Pour être clair, il faudrait que tu nous montres ton code.

**sabotage** · 22/05/2009, 19h31

je ne vais pas connaitre le nom que tu as donnée a ton image

Tu connais non seulement le nom d'origine, mais dans ton traitement d'upload tu lui en donnes forcemment en toi même (qui peut rester le même).

**groskanel** · 22/05/2009, 19h34

je vous montre le code :

le fichier uploader.php:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
</head>
 
<body>
<script>
window.addEvent('load', function() {
 
	var swiffy = new FancyUpload2($('demo-status'), $('demo-list'), {
		url: $('form-demo').action,
		fieldName: 'photoupload',
		path: 'Swiff.Uploader.swf',
		limitSize: 6 * 10500 * 10500, // 30Mb
		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" >
			Upload images:
			<input type="file" name="photoupload" id="demo-photoupload" />
		</label>
	</fieldset>
	<div id="tourh"> </div>
	<div id="demo-status" class="hide">
		<p>
			<a href="#" id="demo-browse">Explorer les fichiers</a> &nbsp;&nbsp;
			<span id="demo-select-images"><input type="checkbox" checked /> Images uniquement </span>&nbsp;&nbsp;&nbsp;
			<a href="#" id="demo-clear">Effacer la liste</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="#"id="demo-upload">Envoyez</a>
 
		</p>
		<br>
		<div>
			<strong class="overall-title">Progression totale</strong><br />
			<img src="mages/assets/progress-bar/bar.gif" class="progress overall-progress" />
		</div>
		<div>
			<strong class="current-title">Progression du fichier</strong><br />
			<img src="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>

et le fichier doUpload.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<?php  
    /*
    * Fichier: doUpload.php
    * Tutorial: Un système de gestion d'images complet pour son site
    */
 
 
    // On charge la classe d'Upload
    include("class.upload.php");
 
    // Changez ce chemin pour l'adapter à votre site
    define("CHEMIN_ABSOLU", "up");
 
 
    $result = array();
 
    // On récupère les fichiers uploadés par notre popup d'Upload
    $handle = new upload($_FILES['photoupload']);
 
    // On vérifie si les fichiers ont bien été uploadés
    if ($handle->uploaded) {
 
        // Pour la création automatique du répertoire daté
        $handle->dir_chmod = 0777;
        $handle->dir_auto_chmod = true;
        $handle->auto_create_dir = true;
 
        // ### ETAPE 1:  Redirection de l'image Originale ###
        $handle->Process(CHEMIN_ABSOLU."".date("Y-m")."/.orig/");
 
 
        // ### ETAPE 2: Création de l'image miniature ###
        $handle->image_resize         = true;
        $handle->image_ratio_crop = true;
        $handle->image_x        = 200;
        $handle->image_y        = 200;
 
        // Pour la création automatique du répertoire daté
        $handle->dir_chmod = 0777;
        $handle->dir_auto_chmod = true;
        $handle->auto_create_dir = true;
 
        // Création de l'image: On la redirige dans le répertoire .mini du mois en cours
        $handle->Process(CHEMIN_ABSOLU."".date("Y-m")."/.mini/");
 
 
        // ### ETAPE 3: Création de l'image optimisée avec watermark ###
        $handle->image_resize = true;
        $handle->image_ratio_y = true;
        $handle->image_x = 800;
        $handle->image_ratio = true;
 
        // Ajout du Watermark
        $handle->image_watermark = "http://patatesandco.fr/photos/web/images/watermark.png";
        $handle->image_watermark_position = 'BR';
 
        // Pour la création automatique du répertoire daté
        $handle->dir_chmod = 0777;
        $handle->dir_auto_chmod = true;
        $handle->auto_create_dir = true;
 
        // Création de l'image et redirection dans le rep images du mois en cours.
        $handle->Process(CHEMIN_ABSOLU."".date("Y-m")."/");
 
 
        // On vérifie si les images ont bien été traitées
        if ($handle->processed) {
 
            // On nettoie les fichiers temporaires
            $handle->clean();
 
            // On renvoi un message à notre popup d'Upload
            $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 {
 
            // On nettoie les fichiers temporaires
            $handle->clean();
 
            // On renvoi un message à notre popup d'Upload
            $result['result'] = 'failed';
            $result['error'] = $handle->error;
        }
    }
    if (!headers_sent() )
    {
        header('Content-type: application/json');
    }
echo json_encode($result);
exit();
 
 
 
?>

**sabotage** · 22/05/2009, 19h42

Ton fichier uploadé porte le nom $handle->file_dst_name dans le dossier CHEMIN_ABSOLU.date("Y-m")."/.orig/"

Invité · 22/05/2009, 19h43

Euhhhh ...
A priori, tu dois pouvoir récupérer le nom avec $_FILES['photoupload'][name]

[EDIT] Oups ! Sabotage a sans doute raison !

**groskanel** · 22/05/2009, 19h46

donc
je dois pouvoir faire un truc du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<?php
$handle->file_dst_name = ...;
$handle->file_dst_name = ...;
?>
grande photo : <img border="0" src="CHEMIN_ABSOLU.date("Y-m")."/.orig/"/<?php echo $handle->file_dst_name; ?>" alt="">
<br />
petite photo : <img border="0" src="CHEMIN_ABSOLU.date("Y-m")."/.mini"/<?php echo $handle->file_dst_name; ?>" alt="">

ou j'ai carrement tout faux ?