formulaire avec upload de photo [Résolu]

[laurentSc]

Bonjour,

je fais un formulaire avec upload de photo, et je voudrais que les infos saisies dans le formulaire soient regroupées avec le nom de la photo dans le même enregistrement MySQL. Or l'upload de la photo ne fait pas partie du formulaire html, mais sera fait en dehors. Si on suppose que l'action du formulaire est exécutée avant l'upload de la photo, une ligne MySQL sera créée avec les infos contenues dans le formulaire ; donc il faudrait mémoriser l'identifiant de cette ligne, pour que quand on fera l'upload de la photo, on puisse rajouter le nom de la photo à cette ligne. J'expose ici mon idée pour savoir ce que vous en pensez : lors de l'action du formulaire, je mémorise l'identifiant dans une variable de session et ainsi quand je fais l'upload, je peux récupérer l'identifiant. Et dès que l'identifiant est récupéré par l'upload, la variable de session est vidée. Mais comme on n'est pas sûr que l'upload soit effectué, sur l'événement "load" de la page d'accueil, je vide aussi cette variable de session. Que pensez-vous de mon idée ?

[ABCIWEB]

Je pense que c'est très compliqué. Pourquoi ne met tu pas un champ pour indiquer le nom de la photo en même temps que le formulaire d'upload ?

Sinon, si tu veux absolument les séparer, je commencerais plutôt par faire l'upload de la photo, et ensuite j'enregistrerais son nom.

[laurentSc]

Ce n'est pas que je tiens à les séparer, mais que je ne sais pas faire autrement : pour faire l'upload, je recours à un plugin jquery (un script js :

Code :

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
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 
  <script type="text/javascript" src="js/swfupload/swfupload.js"></script>
 
  <script type="text/javascript" src="js/jquery.swfupload.js"></script>
 
  <script type="text/javascript">
$(function(){
$('#swfupload-control').swfupload({
upload_url: "upload-file.php",
file_post_name: 'uploadfile',
file_size_limit : "10485760",
file_types : "*.jpg;*.png;*.gif",
file_types_description : "Image files",
file_upload_limit : 5,
flash_url : "js/swfupload/swfupload.swf",
button_image_url : 'js/swfupload/wdp_buttons_upload_114x29.png',
button_width : 114,
button_height : 29,
button_placeholder : $('#button')[0],
debug: false
})
.bind('fileQueued', function(event, file){
var listitem='<li id="'+file.id+'" >'+
'Fichier: <em>'+file.name+'</em> ('+Math.round(file.size/1024)+' KO) <span class="progressvalue" ></span>'+
'<div class="progressbar" ><div class="progress" ></div></div>'+
'<p class="status" >Pending</p>'+
'<span class="cancel" >&nbsp;</span>'+
'</li>';
$('#log').append(listitem);
$('li#'+file.id+' .cancel').bind('click', function(){
var swfu = $.swfupload.getInstance('#swfupload-control');
swfu.cancelUpload(file.id);
$('li#'+file.id).slideUp('fast');
});
// start the upload since it's queued
$(this).swfupload('startUpload');
})
.bind('fileQueueError', function(event, file, errorCode, message){
alert('La taille du fichier '+file.name+' est plus grande que la limite');
})
.bind('fileDialogComplete', function(event, numFilesSelected, numFilesQueued){
//$('#queuestatus').text('Fichier s&eacute;lectionn&eacute; : '+numFilesSelected+' / Queued Files: '+numFilesQueued);
})
.bind('uploadStart', function(event, file){
$('#log li#'+file.id).find('p.status').text('En cours...');
$('#log li#'+file.id).find('span.progressvalue').text('0%');
$('#log li#'+file.id).find('span.cancel').hide();
})
.bind('uploadProgress', function(event, file, bytesLoaded){
//Show Progress
var percentage=Math.round((bytesLoaded/file.size)*100);
$('#log li#'+file.id).find('div.progress').css('width', percentage+'%');
$('#log li#'+file.id).find('span.progressvalue').text(percentage+'%');
})
.bind('uploadSuccess', function(event, file, serverData){
var item=$('#log li#'+file.id);
item.find('div.progress').css('width', '100%');
item.find('span.progressvalue').text('100%');
var pathtofile='<a href="uploads/'+file.name+'" target="_blank" >voir</a>';
item.addClass('success').find('p.status').html('Fait!!! | '+pathtofile);
})
.bind('uploadComplete', function(event, file){
// upload has completed, try the next one in the queue
$(this).swfupload('startUpload');
})
}); </script>
 
  <style type="text/css">
#swfupload-control p{ margin:10px 5px; font-size:0.9em; }
#log{ margin:0; padding:0; width:500px;}
#log li{ list-style-position:inside; margin:2px; border:1px solid #ccc; padding:10px; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#333; background:#fff; position:relative;}
#log li .progressbar{ border:1px solid #333; height:5px; background:#fff; }
#log li .progress{ background:#999; width:0%; height:5px; }
#log li p{ margin:0; line-height:18px; }
#log li.success{ border:1px solid #339933; background:#ccf9b9; }
#log li span.cancel{ position:absolute; top:5px; right:5px; width:20px; height:20px; background:url('js/swfupload/cancel.png') no-repeat; cursor:pointer; }
  </style>

, qui contient le formulaire pour sélectionner le fichier et qui lui-même appelle un script PHP :

Code :

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
<?php
//deb
 
$file_renamed=$_FILES['uploadfile']['name'];
 
$file_renamed=utf8_decode($file_renamed);
$file_renamed = strtr($file_renamed,  "ÀÁÂÃÄÅàáâãäåÒÓÔÕÖØòóôõöøÈÉÊËèéêëÇçÌÍÎÏìíîïÙÚÛÜùúûüÿÑñ",   
			"aaaaaaaaaaaaooooooooooooeeeeeeeecciiiiiiiiuuuuuuuuynn");  
// === on supprime les espaces
$file_renamed=str_replace(" ","_",$file_renamed); 
//fin
 
$uploaddir = './uploads/'; 
 
$file = $uploaddir . basename($file_renamed);
$size=$_FILES['uploadfile']['size'];
if($size>10485760)
{
	echo "error file size > 10 MB";
	unlink($_FILES['uploadfile']['tmp_name']);
	exit;
}
chmod($_FILES['uploadfile']['tmp_name'],0777);
 
 
if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) {
  echo "success"; 
 
} else {
	echo "error ".$_FILES['uploadfile']['error']." --- ".$_FILES['uploadfile']['tmp_name']." %%% ".$file."($size)";
}
?>

, qui, lui, fait l'upload)(l'intérêt de ce script jquery, c'est que pendant l'upload, on a une barre de progression), donc je ne sais pas regrouper le tout : donc comment puis-je regrouper les infos que j'obtiendrais avec un formulaire html et le nom du fichier uploadé ?

Le code html qui lance le script jquery est le suivant :

Code :

1
2
3
4
5
6
7
 <div id="swfupload-control">
        <p>T&eacute;l&eacute;charger votre photo (jpg, png, gif), ayant une taille maximale de 10MO</p>
        <input id="button" type="button">
        <p id="queuestatus"></p>
        <ol id="log">        
        </ol>
        </div>

et si je comprends le script PHP appelé (que j'ai fortement remanié), je ne comprends presque rien au script js.

[jeca]

Bonjour,

Pour le téléchargement de fichiers, tout est là : http://www.php.net/manual/fr/feature...ost-method.php

[laurentSc]

Merci ; je pensais initialement recourir, comme je le disais, à un script jquery, qui aurait permis de faire un truc visible ici, mais ne sachant l'intégrer dans un formulaire html, je vais finalement me rabattre sur la solution classique.

[ABCIWEB]

Pour une solution classique tu peux éventuellement regarder ici.

La classe est facilement paramétrable et comprend de multiples options (renommage automatique, redimensionnement, téléchargement multiple etc.) ainsi que la gestion des erreurs. Dans plusieurs exemples d'utilisation, je fais aussi afficher un message "Patientez..." qui s'affiche durant le téléchargement, c'est moins perfectionné qu'une barre de progression mais cela rend bien service quand même.

[laurentSc]

Merci pour cette classe que je garde de côté, mais je n'ai pas encore les "connaissances minimales requises" : c'est de la POO et je n'y connais rien ; je l'ai réalisé quand j'ai voulu passer de mysql_query à PDO. Donc je vais commencer par apprendre la POO, puis me remettrais à PDO et à ta classe.

[ABCIWEB]

Si si tu as les connaissances suffisantes car elle est conçue pour être utilisée sans connaissances préalables sur la POO. Il suffit de lire le mode d'emploi, et de suivre les exemples. Cela te fera juste comprendre comment instancier (ou déclarer) une classe avec le mot "new" et ensuite comment appeler les fonctions avec le "->". C'EST TOUT!

En fait tout est pré configuré et tu n'as pas besoin de regarder le code interne (juste le mode d'emploi qui liste les fonctions utiles et explique leur paramètres).
L'intérêt justement c'est qu'elle permet beaucoup de choses avec des connaissances vraiment minimales (même en php procédural).

Par exemple tu peux déjà faire le minimum avec trois lignes

Code :

1
2
3
4
5
6
7
8
//On instancie, à l'aide du mot "new", la classe qui s'appelle "Telechargement" avec ses paramètres de configuration et on l'associe à $up (ou a $toto pourquoi pas)
$up = new Telechargement('Documents','form1','doc');
 
// On appelle maintenant selon ses besoins les fonctions prédéfinies (ici "Set_Renomme_fichier") à l'aide de  "->"
$up->Set_Renomme_fichier('incr');
 
// On termine la configuration et on réalise le téléchargement avec la fonction "Upload"
$up->Upload();

Voilà tout ce que tu as besoin de savoir sur le principe d'utilisation. On peut guère faire plus simple

[laurentSc]

Bon, OK, donc dès que j'ai un moment, je regarde.