Bonjour à tous , j'ai modifié un peu (beaucoup? ) le code du plupload, si bien que je n'arrive plus a voir apparaitre ma miniature lorsque j'utilise le drag and drop (sous Chrome, mozilla etc) pourtant quand je fais parcourir ca marche super bien...
Petit edit:
le <input type="button" id="boutton_couverture" name="IMGP0722.JPG" /> sert de test car j'aimerai que lorsque l'image est uploadée, on puisse choissir la couverture de l'album a l'aide d'un boutton "choissir comme couverture" le probleme est qu'il ne se passe rien avec le boutton dans la filelist
Je met le code ici en dessous :
<?php
$dossiers = "albumphoto".rand(0,100000).time();
mkdir("../site/module/multimedia/photo/".$dossiers,0777);
?>
<input type="button" id="boutton_couverture" name="IMGP0722.JPG" />
<div id="ajout_photo_etape_2">
<div class="div_media_700px">
<div class="titre"> Ajouter un album</div>
<div class="contenu">
<form action="admin-multimedia-finaliseralbum" method="post" id="form_creation_album">
<div id="zone_upload">
<div id="zone_drop">
<p>Faites glisser vos fichier ici</p>
<span>ou</span>
<a id="parcourir" href="#"><img src="admin/design/minotaures/images/bouttons/parcourir.png" /></a>
</div>
<div id="finalisation">
<input type='hidden' id='compteur_image' name='compteur_image' value='' />
<input type='hidden' id='dossiers' name='dossiers' value='<?php echo $dossiers; ?>' /> <!-- CECI EST UTILE POUR LE TRAITEMENT IL SERA AUTO COMPLETER PAR LE JQUERY -->
<div class="zone_formulaire_photo">
<label class="titre_photo" name="titre_photo" for="titre_photo">Titre : </label>
<input type="text" id="titre_photo" name="titre_photo" class="input_titre" />
</div>
<div class="zone_formulaire_photo">
<label class="titre_photo" name="titre_photo" for="textarea_description">Description : </label>
<textarea class="textarea_description" name="textarea_description" id="textarea_description"></textarea>
</div>
<div class="zone_formulaire_photo_feedback">
<label class="titre_photo_feedback" name="titre_photo_feedback" for="textarea_description_feedback">Feedback : </label>
<div class="feedback_photo">
<span id="erreur_titre">Vous devez remplir le champ titre.</span>
<span id="erreur_desc">Vous devez remplir le champ description</span>
</div>
</div>
<div class="zone_formulaire_photo">
<input type="submit" class="boutton_submit_media" value=' ' />
</div>
<div id="couverture">
<p class="paragraphe_couverture">Choisissez une photo parmis celles uploadées</p>
</div>
</div>
<div id="filelist">
<?php foreach(glob('../site/module/multimedia/photo/'.$dossiers.'/*.*') as $v){
echo basename($v);
} ?>
</div>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="admin/js/pupload/plupload.js"></script>
<script type="text/javascript" src="admin/js/pupload/plupload.flash.js"></script>
<script type="text/javascript" src="admin/js/pupload/plupload.html5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.boutton_submit_media').hide();
$('.zone_formulaire_photo_feedback').hide();
$("#erreur_titre").hide();
$("#erreur_desc").hide();
//Petite gestion du formulaire titre et description .
var result_titre = false;
var result_desc = false;
var result_form = false; //A la base le formulaire peut pas etre valide.
$('#form_creation_album').submit(function(){
//On recache les zone feedback (au cas du re-click).
$('.zone_formulaire_photo_feedback').hide();
$("#erreur_titre").hide();
$("#erreur_desc").hide();
$("#titre_photo").css("border","1px solid #abadb3");
$("#textarea_description").css("border","1px solid #abadb3");
if ($("#titre_photo").val()==""){
result_titre = false;
result_form = false;
}else{
result_titre = true;
}
if ($("#textarea_description").val()==""){
result_desc = false;
result_form = false;
}else{
result_desc = true;
}
//Si les champs sont pas remplis, alors on envoi pas le fichier.
if(result_desc && result_titre){ result_form = true; }
//Si le formulaire ne peut pas etre envoyé, il faut montrer le feedback
if(!result_form){
$('.zone_formulaire_photo_feedback').fadeIn(1200);
if(!result_titre){ $("#titre_photo").css("border","1px solid #984545"); $("#erreur_titre").show();}
if(!result_desc){ $("#textarea_description").css("border","1px solid #984545");$("#erreur_desc").show();}
}
return result_form;
});
//Fin de la partie gestion du formulaire.
//Initialisation des variables.
var compteur = 0;
var uploader = new plupload.Uploader({
runtimes : 'html5,flash',
browse_button : 'parcourir',
drop_element : 'zone_drop',
container: 'zone_upload',
url : 'admin/module/media/photo/upload.php?album=<?php echo $dossiers; ?>',
flash_swf_url : 'admin/js/pupload/plupload.flash.swf',
multipart: true,
urlstream_upload: true,
max_file_size:'10mb',
multipart_params:{directory:'admin'},
});
uploader.init();
//Evenement lorsque le fichier est ajouté.
uploader.bind('filesAdded',function(up,files){
var filelist = $('#filelist');
console.log(files);
//Pour chaque fichier on crée un nouveau div avec id unique et une class pour le style.
//Plupload.formatSize est une fonction qui détermine la taille de l'image.
for (var i in files){
var file = files[i];
filelist.prepend('<div id="'+ file.id +'" class="liste_des_fichiers"><div class="temporaire_liste'+ file.id +'">'+ file.name +'('+ plupload.formatSize(file.size) +')</div><div class="progressbar"><div class="progress"></div></div></div>');
}
$('#zone_drop').removeClass('hoverarea');
uploader.start();
uploader.refresh();
});
//evenement lors de la progression de l'upload.
uploader.bind('UploadProgress',function(up,file){
$('#'+file.id).find('.progress').css('width',file.percent +'%');
});
//Evement lors d'une erreur.
uploader.bind('Error',function(up,err){
$('#zone_drop').removeClass('hoverarea');
uploader.refresh();
});
//Quand le fichier est up.
uploader.bind('fileUploaded',function(up, file, response){
data = $.parseJSON(response.response);
if(data.error){
$('#'+file.id).remove();
}else{
compteur++;
$('#'+file.id).addClass('Complete_upload');
$('.temporaire_liste'+file.id).remove();
$('#'+file.id).find('.progressbar').fadeOut();
var input_titre = '<div class="zone_formulaire_photo"><input type="hidden" name="nom_image'+compteur+'" value="'+file.name+'" /><label class="titre_photo" name="titrephoto'+ compteur +'" for="titrephoto'+ compteur +'">Titre : </label><input type="text" id="titrephoto'+ compteur +'" name="titrephoto'+ compteur +'"class="input_titre" /></div>';
var textarea_description = '<div class="zone_formulaire_photo"><label class="titre_photo" name="descphoto'+ compteur +'" for="descphoto'+ compteur +'">Description : </label><textarea id="descphoto'+ compteur +'" name="descphoto'+ compteur +'" class="textarea_description"></textarea></div>';
var formulaire = input_titre + textarea_description;
$('#'+file.id).prepend('<div class="apercu_mignature"><img src="site/module/multimedia/photo/<?php echo $dossiers;?>/mini'+ file.name +'" /><input type="button" id="boutton_couverture" /></div><div class="description_mignature">'+ formulaire +'</div>');
}
});
//Quand l'upload est fini .
uploader.bind('UploadComplete', function() {
$('#compteur_image').val(compteur);
$('.boutton_submit_media').fadeIn(1200);
});
//ceci c'est pour la partie couverture ...
jQuery(function($){
$('#zone_drop').bind({
dragover: function(e){
$(this).addClass('hoverarea');
},
dragleave: function(e){
$(this).removeClass('hoverarea');
}
});
});
$("#boutton_couverture").click(function(){
var couverture = $(this).attr('name');
$('.paragraphe_couverture').remove();
$('#couverture').prepend('<img src="site/module/multimedia/photo/<?php echo $dossiers;?>/mini'+ couverture +'" />');
});
});
</script>
Merci de l'aide