multipart form-data , upload, ajax et json dans une seule requete

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:

---

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:

---

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

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:

---

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

---

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.

Citation:

---

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 { … }

---

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 :

Citation:

---

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" :

Citation:

---

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.

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

SyntaxError: missing } after property list

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

Code:

---

1 2

}).done

---

j'ai corrigé mon post.

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.