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;
            }
        });
    });

2 réponses


Grafikart
Réponse acceptée

Pour le slideDown il faut écouter le load sur img (je te laisse chercher sur google "load listener image jquery" :))

6ber6ou
Auteur

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 ?