Discussion :

[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 :

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
  <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 :

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

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

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.