Affichage d'images aprés upload [Résolu]

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é ?

jreaux62 · 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.

jreaux62 · 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.

jreaux62 · 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

jreaux62 · 22/05/2009, 19h31

Citation:

Envoyé par groskanel

je suis plus clair ?

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

sabotage · 22/05/2009, 19h31

Citation:

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/"

jreaux62 · 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 ?

sabotage · 22/05/2009, 20h11

Essai, tu n'as pas besoin de notre approbation pour bosser un peu

groskanel · 22/05/2009, 20h32

c'est pas faux

je vais manger et si j'ai un peu de temps je teste ca

en tout cas: merci pour le coup de main

(et probablement a tres tres bientot

)

22/05/2009, 15h16	#1
groskanel Futur Membre du Club Inscription : mai 2009 Messages : 229 Détails du profil Informations forums : Inscription : mai 2009 Messages : 229 Points : 18 Points : 18	Affichage d'images aprés upload 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.
	00

22/05/2009, 16h22	#3
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 3 657 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 46 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 3 657 Points : 7 538 Points : 7 538	J'espère que tu as utilisé mon tuto ! Fonctions de redimensionnement d'images : http://j-reaux.developpez.com/tutori...sionner-image/ __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. "Quand le sage montre la lune, le sot regarde le doigt." Confucius, Homme d'Etat et philosophe chinois (551-479 av. J.-C). Site perso Mes tutos DVP Gestion-Affichage de Nouvelles Affichage en tableau HTML Fonctions de redimensionnement d'images
	00

22/05/2009, 19h43	#17
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 3 657 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 46 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 3 657 Points : 7 538 Points : 7 538	Euhhhh ... A priori, tu dois pouvoir récupérer le nom avec $_FILES['photoupload'][name] [EDIT] Oups ! Sabotage a sans doute raison ! __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. "Quand le sage montre la lune, le sot regarde le doigt." Confucius, Homme d'Etat et philosophe chinois (551-479 av. J.-C). Site perso Mes tutos DVP Gestion-Affichage de Nouvelles Affichage en tableau HTML Fonctions de redimensionnement d'images
	00

22/05/2009, 16h09	#2
sabotage Modérateur Vincent Inscription : juillet 2005 Messages : 16 501 Détails du profil Informations personnelles : Nom : Vincent Informations forums : Inscription : juillet 2005 Messages : 16 501 Points : 21 333 Points : 21 333	A quel niveau se situe ta difficulté ?
	00

22/05/2009, 18h57	#4
groskanel Futur Membre du Club Inscription : mai 2009 Messages : 229 Détails du profil Informations forums : Inscription : mai 2009 Messages : 229 Points : 18 Points : 18	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..
	00

22/05/2009, 19h04	#5
sabotage Modérateur Vincent Inscription : juillet 2005 Messages : 16 501 Détails du profil Informations personnelles : Nom : Vincent Informations forums : Inscription : juillet 2005 Messages : 16 501 Points : 21 333 Points : 21 333	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.
	00

22/05/2009, 19h23	#8
sabotage Modérateur Vincent Inscription : juillet 2005 Messages : 16 501 Détails du profil Informations personnelles : Nom : Vincent Informations forums : Inscription : juillet 2005 Messages : 16 501 Points : 21 333 Points : 21 333	Tu remplaces le nom fictif donné dans cet exemple par ta variable contenant le nom de l'image.
	00

22/05/2009, 19h24	#9
groskanel Futur Membre du Club Inscription : mai 2009 Messages : 229 Détails du profil Informations forums : Inscription : mai 2009 Messages : 229 Points : 18 Points : 18	justement c'est la variable que je ne connais pas.... je ne vois pas quoi mettre
	00

22/05/2009, 19h25	#10
sabotage Modérateur Vincent Inscription : juillet 2005 Messages : 16 501 Détails du profil Informations personnelles : Nom : Vincent Informations forums : Inscription : juillet 2005 Messages : 16 501 Points : 21 333 Points : 21 333	ba c'est dans ton code d'upload que tu as défini le nom du fichier.
	00

22/05/2009, 19h29	#12
groskanel Futur Membre du Club Inscription : mai 2009 Messages : 229 Détails du profil Informations forums : Inscription : mai 2009 Messages : 229 Points : 18 Points : 18	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
	00

22/05/2009, 19h42	#16
sabotage Modérateur Vincent Inscription : juillet 2005 Messages : 16 501 Détails du profil Informations personnelles : Nom : Vincent Informations forums : Inscription : juillet 2005 Messages : 16 501 Points : 21 333 Points : 21 333	Ton fichier uploadé porte le nom $handle->file_dst_name dans le dossier CHEMIN_ABSOLU.date("Y-m")."/.orig/"
	00

22/05/2009, 20h11	#19
sabotage Modérateur Vincent Inscription : juillet 2005 Messages : 16 501 Détails du profil Informations personnelles : Nom : Vincent Informations forums : Inscription : juillet 2005 Messages : 16 501 Points : 21 333 Points : 21 333	Essai, tu n'as pas besoin de notre approbation pour bosser un peu
	00

22/05/2009, 20h32	#20
groskanel Futur Membre du Club Inscription : mai 2009 Messages : 229 Détails du profil Informations forums : Inscription : mai 2009 Messages : 229 Points : 18 Points : 18	c'est pas faux je vais manger et si j'ai un peu de temps je teste ca en tout cas: merci pour le coup de main (et probablement a tres tres bientot )
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email