Salut @ tous !
Je but sur un problème avec jQuery :
J'ai un formulaire d'upload en ajax créé à l'aide du plug-in uploadify.
Une fois l'image téléchargée sur le serveur, je remplis une DIV vide existante sur la page avec la photo qui vient d'être uploadée :
$('#DIV_photo').append('<img src="upload/ma_photo.jpg" alt="" />');
Puis je fais un slideDown du DIV :
$('#DIV_photo').slideDown('slow', function(){});
Le problème est que le slideDown se fait alors que la photo n'est pas encore chargée.
Comment faire pour déclencher le slideDown une fois la photo uploadée complètement chargée ?
Merci pour votre aide...
PS : Voici le code :
Index.php :
<form action="http://localhost/creer_annonce" method="post" enctype="multipart/form-data" id="form_upload">
<div id="uploader_file_attente">
</div>
<div id="uploader">
<input type="file" id="file_upload" name="file_upload" />
</div>
</form>
Upload.js
$(document).ready(function()
{
$('#file_upload').uploadify(
{
'auto':true,
'buttonImg':'/images/uploadify_bouton.png',
'cancelImg':'/images/uploadify_cancel.png',
'expressInstall':'/jq/uploadify_2_1_4/expressInstall.swf',
'fileDesc':'Fichiers JPG ou JPEG',
'fileExt':'*.jpg;*.jpeg',
'folder':'/photos',
'height':38,
'queueID':'uploader_file_attente',
'rollover':true,
'script':'/php/uploadify.php',
'sizeLimit':10000000,
'uploader':'/jq/uploadify_2_1_4/uploadify.swf',
'width':196,
'onOpen':function(event, ID, fileObj)
{
$('#uploader_file_attente').slideDown('slow', function(){});
},
'onComplete':function(event, ID, fileObj, response, data)
{
$('#uploader_file_attente').slideUp('slow', function(){});
$('#photo_annonce').slideUp('slow', function(){});
$('#photo_annonce').html('').append('<img src="/photos/photo_inconnue.png" alt="Photo du produit" id="photo_annonce" />')
// ATTENDRE LE CHARGEMENT COMPLET DE LA PHOTO ET FAIRE UN SLIDEDOWN
return false;
},
'onError':function(event, ID, fileObj, errorObj)
{
$('#uploader_file_attente').hide();
$('#erreur_upload').append('Erreur lors de l\'envoi du fichier !<br /><span class="texte_non_gras">(Vérifiez que le type et la taille du fichier sont corrects.)</span>');
$('.fileName').hide();
return false;
}
});
});
Pour le slideDown il faut écouter le load sur img (je te laisse chercher sur google "load listener image jquery" :))
En cherchant load listener image jquery sur google je suis tombé sur ce site qui parle (si j'ai bien compris) de problème de compatibilité entre addEventListener et IE < 9.
Heureusement ils donnent une alternative qui fonctionne avec IE < 9 normalement :
$("<img>", {src: '/photos/membre_' + id_membre + '/' + fileObj.name}).bind('load', function()
{
$('#uploader_file_attente').slideUp('slow', function(){});
$('#photo_annonce').slideDown('slow', function(){});
});
Et là ça marche ;) !!!
Merci pour ton aide et tous tes supers tutos.
PS : Petit message subliminale : A quand un tuto pour implanter un éditeur de texte genre NicEdit ou TinyNCE dans CodiIgniter ?