Bonjour, j'ai récemment utilisé le plugin plupload pour envoyer plusieurs à la fois dans un dossier et également le chemin de la photo dans une table,
mon soucis c'est que je voudrai aussi ajouté une référence que je mettrai moi meme à l'aide d'un champ input. je ne vois pas trop comment faire :
La page d'ajout des images :
<form method="post" action="ajouterimage.php" enctype="multipart/form-data">
Reference : <input type="text" name="ref" id="ref" />
<input type="submit" id="upload" name="envoyer" value="envoyer"/>
</form>
<div id="plupload">
<div id="droparea">
<p>déposer vos fichiers ici</p>
<span class="or">ou</span>
<a href="#"id="browse"> Parcourir</a>
</div>
<div id="filelist">
<?php while($data=mysql_fetch_array($id)){ ?>
<?php foreach(glob('../img/*.*') as $v):?>
<div class="file">
<?php echo "{$data['id']}";?>
<img src="<?php echo $v;?>" height="70" id="imgup"/>
<?php echo basename($v);?>
<div id="actions">
<a href="<?php echo basename($v);?>" class="del">supprimer</a>
</div>
<div>
<?php endforeach;?>
<?php }?>
</div>
</div>
la page de gestion des upload :
<?php
require_once("connexionbdd/connexionBdd.inc.php");
if(isset($_GET['action']) && $_GET['action'] =='delete'){
//penser à sécuriser cette ligne(vérifier le format de file)
unlink('../img/'.$_GET['file']);
die();
$requete="DELETE FROM bien WHERE id='".$_GET['id']."' ";
}
$file = $_FILES['file'];
$name = $file['name'];
if(filesize($file['tmp_name'])>5000000){
die('{"error":true, "message" :"Image trop grande"}');
}
if(file_exists('../img/'.$name)){
die('{"error":true, "message" :"L\'mage esiste déjà"}');
}
//penser à sécuriser cette ligne(vérifier le format de file)
move_uploaded_file($_FILES['file']['tmp_name'],'../img/'.$_FILES['file']['name']);
mysql_query("INSERT INTO photos VALUES(
'".mysql_real_escape_string('')."',
'".mysql_real_escape_string($name)."',
'".mysql_real_escape_string($_POST["refA"])."'
)
");
// on ferme la connection mysql donc ci-dessous plus de sql
mysql_close();
$v = 'upload/'.$_FILES['file']['name'];
$html ='<div class="file"><img src="'.$v.'"/>'.basename($v).'<div id="actions"><a href="'.basename($v).'" class="del">supprimer</a></div><div>';
$html = str_replace('"','\\"',$html);
die('{"error":false, "html" :"'.$html.'"}');
?>
le js qui permet de gérer plupload :
[javascript]
// JavaScript Document
var uploader = new plupload.Uploader({
runtimes : 'html5,flash',
container :'plupload',
browse_button :'browse',
drop_element :"droparea",
url : 'upload.php',
flash_swf_url :'js/plupload/plupload.flash.swf',
multipart : true,
urlstream_upload : true,
multipart_params :{directory:'test'},
resize :{width:800,height:400,quality:90},
max_file_size:'5mb',
filters :[
{title :'Images', extensions :'jpg,gif,png'}
]
})
uploader.bind('UploadProgress',function(up,file){
console.log(file);
$('#'+file.id).find('.progress').css('width',file.percent+'%');
})
uploader.init();
uploader.bind('FilesAdded',function(up,files){
var filelist = $('#filelist');
console.log(files);
for(var i in files ){
var file = files
;
filelist.prepend('<div id="'+file.id+'" class="file">'+ file.name+'('+plupload.formatSize(file.size)+')'+'<div class="progressbar"><div class="progress"></div> <label>Légende <input id="' + files.id + 'Legende" type="text" size="25" name="media[' + files.id + '][legende]" value="" /></label> <label>Légende <input id="refA" type="text" size="25" name="refA" value="testA" /></label> </div></div>');
}
$('#droparea').removeClass('hover');
uploader.start();
uploader.refresh();
});
uploader.bind('Error',function(up,err){
alert(err.message);
$('#droparea').removeClass('hover');
uploader.refresh();
});
uploader.bind('FileUploaded',function(up, file, response){
data = $.parseJSON(response.response);
if(data.error){
alert(data.message);
$('#'+file.id).remove();
}else{
$('#'+file.id).replaceWith(data.html);
}
});
jQuery(function($){
$('#upload').click(function(){
uploader.start();
})
$('#droparea').bind({
dragover : function(e){
$(this).addClass('hover');
},
dragleave : function(e){
$(this).removeClass('hover');
}
});
$('.del').live('click',function(e){
e.preventDefault();
var elem = $(this);
if(confirm('Voulez vous vraiment supprimer cete image?')){
$.get('upload.php',{action:'delete',file:elem.attr('href')});
elem.parent().parent().slideUp();
}
return false;
});
})
[/javascript]
Bonjour, j'ai récemment utilisé le plugin plupload pour envoyer plusieurs à la fois dans un dossier et également le chemin de la photo dans une table,
mon soucis c'est que je voudrai aussi ajouté une référence que je mettrai moi meme à l'aide d'un champ input. je ne vois pas trop comment faire :
La page d'ajout des images :
[php] <form method="post" action="ajouterimage.php" enctype="multipart/form-data">
Reference : <input type="text" name="ref" id="ref" />
<input type="submit" id="upload" name="envoyer" value="envoyer"/>
</form>
<div id="plupload">
<div id="droparea">
<p>déposer vos fichiers ici</p>
<span class="or">ou</span>
<a href="#"id="browse"> Parcourir</a>
</div>
<div id="filelist">
<?php while($data=mysql_fetch_array($id)){ ?>
<?php foreach(glob('../img/*.*') as $v):?>
<div class="file">
<?php echo "{$data['id']}";?>
<img src="<?php echo $v;?>" height="70" id="imgup"/>
<?php echo basename($v);?>
<div id="actions">
<a href="<?php echo basename($v);?>" class="del">supprimer</a>
</div>
<div>
<?php endforeach;?>
<?php }?>
</div>
</div>[/php]
la page de gestion des upload :
<?php
require_once("connexionbdd/connexionBdd.inc.php");
if(isset($_GET['action']) && $_GET['action'] =='delete'){
//penser à sécuriser cette ligne(vérifier le format de file)
unlink('../img/'.$_GET['file']);
die();
$requete="DELETE FROM bien WHERE id='".$_GET['id']."' ";
}
$file = $_FILES['file'];
$name = $file['name'];
if(filesize($file['tmp_name'])>5000000){
die('{"error":true, "message" :"Image trop grande"}');
}
if(file_exists('../img/'.$name)){
die('{"error":true, "message" :"L\'mage esiste déjà"}');
}
//penser à sécuriser cette ligne(vérifier le format de file)
move_uploaded_file($_FILES['file']['tmp_name'],'../img/'.$_FILES['file']['name']);
mysql_query("INSERT INTO photos VALUES(
'".mysql_real_escape_string('')."',
'".mysql_real_escape_string($name)."',
'".mysql_real_escape_string($_POST["refA"])."'
)
");
// on ferme la connection mysql donc ci-dessous plus de sql
mysql_close();
$v = 'upload/'.$_FILES['file']['name'];
$html ='<div class="file"><img src="'.$v.'"/>'.basename($v).'<div id="actions"><a href="'.basename($v).'" class="del">supprimer</a></div><div>';
$html = str_replace('"','\\"',$html);
die('{"error":false, "html" :"'.$html.'"}');
?>
le js qui permet de gérer plupload :
[javascript]
// JavaScript Document
var uploader = new plupload.Uploader({
runtimes : 'html5,flash',
container :'plupload',
browse_button :'browse',
drop_element :"droparea",
url : 'upload.php',
flash_swf_url :'js/plupload/plupload.flash.swf',
multipart : true,
urlstream_upload : true,
multipart_params :{directory:'test'},
resize :{width:800,height:400,quality:90},
max_file_size:'5mb',
filters :[
{title :'Images', extensions :'jpg,gif,png'}
]
})
uploader.bind('UploadProgress',function(up,file){
console.log(file);
$('#'+file.id).find('.progress').css('width',file.percent+'%');
})
uploader.init();
uploader.bind('FilesAdded',function(up,files){
var filelist = $('#filelist');
console.log(files);
for(var i in files ){
var file = files[i];
filelist.prepend('<div id="'+file.id+'" class="file">'+ file.name+'('+plupload.formatSize(file.size)+')'+'<div class="progressbar"><div class="progress"></div> <label>Légende <input id="' + files[i].id + 'Legende" type="text" size="25" name="media[' + files[i].id + '][legende]" value="" /></label> <label>Légende <input id="refA" type="text" size="25" name="refA" value="testA" /></label> </div></div>');
}
$('#droparea').removeClass('hover');
uploader.start();
uploader.refresh();
});
uploader.bind('Error',function(up,err){
alert(err.message);
$('#droparea').removeClass('hover');
uploader.refresh();
});
uploader.bind('FileUploaded',function(up, file, response){
data = $.parseJSON(response.response);
if(data.error){
alert(data.message);
$('#'+file.id).remove();
}else{
$('#'+file.id).replaceWith(data.html);
}
});
jQuery(function($){
$('#upload').click(function(){
uploader.start();
})
$('#droparea').bind({
dragover : function(e){
$(this).addClass('hover');
},
dragleave : function(e){
$(this).removeClass('hover');
}
});
$('.del').live('click',function(e){
e.preventDefault();
var elem = $(this);
if(confirm('Voulez vous vraiment supprimer cete image?')){
$.get('upload.php',{action:'delete',file:elem.attr('href')});
elem.parent().parent().slideUp();
}
return false;
});
})
[/javascript]