Transmission des images à PHP par JQuery

[Gordibach]

Bonjour à tous,

Je m'essaie actuellement au JS (et au JQuery) et j'essaie de créer un système d'upload d'image un peu évolué. L'idée est de créer un système qui affiche les images qui vont être uploadées (par PHP) à l'utilisateur. Lorsque l'utilisateur a choisi ses images, elles s'affichent. J'aimerai faire en sorte qu'en parallèle de l'affichage de ces images, elles soient envoyées par une requête post JQuery à mon script PHP qui les traitera pour les ajouter insérer dans le système.

Je suis néanmoins bloqué à un endroit de mon script. En effet, je n'arrive pas à transmettre l'image elle-même au script PHP. Je ne comprends pas quelle variable pourrait correspondre aux images issues de l'input file.

Sur le code suivant, j'ai donc ma fonction qui sélectionne les images issues de mon input file, les boucle, les envoie à une fonction qui se charge de les afficher à l'écran (qui fonctionne) puis tente de les envoyer au script php avec la requête post (ligne 23). Cette requête fonctionne lorsque j'envoie l'id de l'image mais pas lorsque je tente d'y mettre le fichier qui pour moi correspond à la variable file du script. Je suppose donc que cette variable ne correspond pas à l'image.

Code :

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
fileInput.onchange = function() {
 
                var files = this.files,
                    filesLen = files.length,
                    imgType;
 
                for (var i = 0 ; i < filesLen ; i++) {
 
                    imgType = files[i].name.split('.');
                    imgType = imgType[imgType.length - 1];
 
                    if(allowedTypes.indexOf(imgType) != -1) {
                        $.ajax({
                            type: 'POST',
                            url: 'ajax/index.php?fichier=1016',
                            async: false,
                            success: function(data)
                            { 
                                var image_id = data.substring(1); 
 
                                createThumbnail(files[i], numb_img_load, files[i].name, image_id);
 
                                $.post(
                                    'ajax/index.php?fichier=1005',
                                    {
                                        image_id : image_id,
                                        file : files[i]
                                    },
                                    function(data){
                                        alert(data);
                                    }, 
                                    'html'
                                );
 
                            },
                            error: function(data) {alert(data);},
                            dataType: 'html'
                        });
                    }
                }
            };

Pourriez-vous m'aider sur ce point ?
D'avance merci,
Gordibach

[Bovino]

Tu peux regarder du côté de l'API FormData(), mais ce ne sera pas cross browser et sinon, AJAX ne peut envoyer de fichier !