Discussion :

[netlink1987]

bonjour à tous,

Voila je rame avec l'envoi d'une requête à partir d'un formulaire.

Cette requête doit envoyer une image bmp avec multipart/form-data et je dois
associer à cette même requête des paramètres à destination d'une API. Malheureusement, tout
ce que j'ai pu tester pour le moment est infructueux.

Le formulaire est simple , de type:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<form method="POST" enctype="multipart/form-data" id="uploadform">
    <input type="file" name="files"/><br/>
    <input type="submit" value="Submit"/>
</form>

Le script doit envoyer le fichier et les paramètres:

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
#uploadform ....
function submituploadimage(){
       $.ajax({
        type: "POST",
        url: "/cgi/uploadoverlayimage.cgi",
        data: JSON.stringify({
           "apiVersion": "1.0",
           "context": "323",
           "method": "uploadOverlayImage",
           "params": {
                    "scaleToResolution": false
                                 }
                }),
                success: function( data ){
        console.log(data);
            ......
                                }
    });
}

Je ne sais pas comment construire cette requête malgré mes recherches pour envoyer le fichier ET
les paramètres attendus par l'API: context, method: ..

Si vous pouvez m'aider ...
merci

[Toufik83]

Salut,

Pour envoyer un fichier avec $.ajax, il faut utiliser deux paramètres dans les options contentType et processData et les initialiser à false, plus un objet FormData()

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
 
var fd=new FormData();
fd.append("image",$("#uploadform [name='files']").get(0).files);
fd.append("apiVersion", "1.0");
fd.append("context", "323");
fd.append("method", "uploadOverlayImage");
fd.append("params[scaleToResolution]",false);
fd.append("params[image]",$("#uploadform [name='files']").get(0).files);
$.ajax({
   type: "POST",
   url: "/cgi/uploadoverlayimage.cgi",
   data:fd,
   dataType:"json",
   contentType: false,
   processData: false
}).done(function(data){
   console.log("Success ajax :",data);
})
.fail(function(err){
   alert("Erreur ajax :",err);    
});

[netlink1987]

Merci toufik pour ton aide, j'ai essayé le script mais sans succès. J'ai un message "invalid request" "method: unknown"
comme si la requête était mal formatée, en tout cas, il ne semble pas que l'api reçoive ce qu'il faudrait, voici console.log
paramètres envoyés et réponse en bas.

XHRPOSThttp://192.168.1.38/cgi/uploadoverlayimage.cgi
[HTTP/1.1 200 OK 92ms]
1
-----------------------------56218285837328617183602102422
2
Content-Disposition: form-data; name="image"
3
4
[object FileList]
5
-----------------------------56218285837328617183602102422
6
Content-Disposition: form-data; name="apiVersion:"
7 ​
8
1.0
9
-----------------------------56218285837328617183602102422
10
Content-Disposition: form-data; name="context:"
11
12
323
13
-----------------------------56218285837328617183602102422
14
Content-Disposition: form-data; name="method:"
15 ​
16
uploadOverlayImage
17
-----------------------------56218285837328617183602102422
18
Content-Disposition: form-data; name="params:[scaleToResolution]"
19 ​
20
false
21
-----------------------------56218285837328617183602102422
22
Content-Disposition: form-data; name="params:[image]"
23 ​
24
[object FileList]
25
-----------------------------56218285837328617183602102422--
26 ​

Success ajax :
{…}
​apiVersion: "1.0"
​error: Object { code: 1004, message: "invalid request" }
​method: "unknown"
​<prototype>: Object { … }

[Toufik83]

Bonjour,

Alors là au moins les données sont bien envoyées et reçues, car on voit bien name="image" et name="params[image]" dont les valeurs sont un objet de type FileList [object FileList] dans :

2
Content-Disposition: form-data; name="image"
3
4
[object FileList]
5
Content-Disposition: form-data; name="params:[image]"
23
24
[object FileList]
25

Sauf qu'on a ajouté "image" en double dans le FormData, tu peux utiliser seulement celui de params et supprimer "image" du FormData.

Par-contre la réponse serveur renvoi une erreur "invalid request" :

error: Object { code: 1004, message: "invalid request" }

Est-ce que tu as accès au code pour voir comment l'api gère le retour ? car sans code je ne peux pas deviner d'où vient l'erreur.

[netlink1987]

J'ai par contre toujours une erreur avec ton code:

SyntaxError: missing } after property list

[Toufik83]

oupss, oui effectivement, j'ai oublié de fermer l'accolade avant done :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
}).done

j'ai corrigé mon post.

[netlink1987]

bonjour,

Apres de multiples essais, j'ai finalement découvert que l'api utilisée pour cette requête ne fonctionne pas.
Le code lui, est bon.

Merci toufik.