Discussion :

[tjoce05]

Bonjour,

J'ai développé ce script qui me permet d'uploader un fichier type "image" vers le server avec Ajax et PHP.
les images uploadées s'affichent sans rechargement de la page, mais je trouve que mon code n'est pas "clean". Avez vous un code plus simple pour effectuer le même résultat,
surtout concernant l'affichage simultané des images dans la div.

Merci, voici mon code :

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
//******************************************************
//Show thumbnail
//******************************************************
var request = $.ajax({
    method: "GET",
    url: "inc/thumbnail.php",
    data: "ID=1",
    dataType: "html",
})
request.done(function( msg ) {
    $( "#showUploadedFiles" ).html( msg );
});
request.fail(function( jqXHR, textStatus ) {
    alert( "Request failed: " + textStatus );
});
//*******************************************************
$("form#data").change(function(event){
    //disable the default form submission
    event.preventDefault();
    //grab all form data  
    var formData = new FormData($(this)[0]);
    $.ajax({
        url: "inc/ajax.php",
        type: "POST",
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function (returndata) {
            //alert(returndata);
            //window.location.reload(true);
            //********************************************************
            var request = $.ajax({
                method: "GET",
                url: "inc/thumbnail.php",
                data: "ID=1",
                dataType: "html",
            })
            request.done(function( msg ) {
                $( "#showUploadedFiles" ).html( msg );
            });
            request.fail(function( jqXHR, textStatus ) {
                alert( "Request failed: " + textStatus );
            });
        }    
    });
    return false;
});

[ABCIWEB]

Salut,

Tu peux utiliser FileReader pour faire afficher les images avant et durant l'upload.

C'est ce dont je me sert par exemple dans cette classe d'upload ajax. La fonction se nomme "ImgPrevisualisation" si tu veux jeter un oeil. Mais tu peux regarder dans d'autres contextes (par exemple ici vers le milieu de la page) car si cette classe est facile d'utilisation, le code est assez touffu du fait des nombreuses fonctionnalités implémentées (surpasse les limites serveur, reprise d'upload possible, informations en temps réel, styles évènementiels...).