You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 5-network/02-formdata/article.md
+40-40Lines changed: 40 additions & 40 deletions
Original file line number
Diff line number
Diff line change
@@ -1,26 +1,26 @@
1
1
2
2
# FormData
3
3
4
-
This chapter is about sending HTML forms: with or without files, with additional fields and so on.
4
+
Ce chapitre concerne l'envoi de formulaires HTML: avec ou sans fichiers, avec des champs supplémentaires, etc...
5
5
6
-
[FormData](https://xhr.spec.whatwg.org/#interface-formdata)objects can help with that. As you might have guessed, it's the object to represent HTML form data.
6
+
Les objets [FormData](https://xhr.spec.whatwg.org/#interface-formdata)peuvent nous aider pour cela. Comme vous l'avez peut-être deviné, c'est l'objet pour représenter les données du formulaire HTML.
7
7
8
-
The constructor is:
8
+
Le constructeur est :
9
9
```js
10
10
let formData =newFormData([form]);
11
11
```
12
12
13
-
If HTML `form`element is provided, it automatically captures its fields.
13
+
Si un élément HTML `form`est fourni, il capture automatiquement ses champs.
14
14
15
-
The special thing about `FormData`is that network methods, such as`fetch`, can accept a `FormData`object as a body. It's encoded and sent out with`Content-Type: form/multipart`.
15
+
La particularité de `FormData`est que les méthodes réseau, telles que`fetch`, peuvent accepter un objet `FormData`en tant que corps. Il est encodé et envoyé avec`Content-Type: form/multipart`.
16
16
17
-
From the server point of view, that looks like a usual form submission.
17
+
Du point de vue du serveur, cela ressemble à une soumission de formulaire habituelle.
18
18
19
-
## Sending a simple form
19
+
## Envoi d'un formulaire simple
20
20
21
-
Let's send a simple form first.
21
+
Envoyons d'abord un formulaire simple.
22
22
23
-
As you can see, that's almost one-liner:
23
+
Comme vous pouvez le voir, c'est presque une ligne :
24
24
25
25
```html run autorun
26
26
<formid="formElem">
@@ -47,26 +47,26 @@ As you can see, that's almost one-liner:
47
47
</script>
48
48
```
49
49
50
-
In this example, the server code is not presented, as it's beyound our scope. The server accepts the POST request and replies "User saved".
50
+
Dans cet exemple, le code du serveur n'est pas présenté, car il dépasse notre portée. Le serveur accepte la requête POST et répond "User saved".
51
51
52
-
## FormData Methods
52
+
## Méthodes FormData
53
53
54
-
We can modify fields in `FormData`with methods:
54
+
Nous pouvons modifier les champs dans `FormData`avec des méthodes :
55
55
56
-
-`formData.append(name, value)` - add a form field with the given`name`and`value`,
57
-
-`formData.append(name, blob, fileName)` - add a field as if it were `<input type="file">`, the third argument `fileName`sets file name (not form field name), as it were a name of the file in user's filesystem,
58
-
-`formData.delete(name)` - remove the field with the given `name`,
59
-
-`formData.get(name)` - get the value of the field with the given `name`,
60
-
-`formData.has(name)` - if there exists a field with the given `name`, returns`true`, otherwise`false`
56
+
-`formData.append(name, value)` - ajoute un champ de formulaire avec le`name`et`value` donnés,
57
+
-`formData.append(name, blob, fileName)` - ajoute un champ comme s'il était `<input type="file">`, le troisième argument `fileName`définit le nom du fichier (pas le nom du champ de formulaire), comme s'il s'agissait d'un nom du fichier dans le système de fichiers de l'utilisateur,
58
+
-`formData.delete(name)` - supprimer le champ avec le `name` donné,
59
+
-`formData.get(name)` - obtient la valeur du champ avec le `name` donné,
60
+
-`formData.has(name)` - s'il existe un champ avec le `name` donné, retourne`true`, sinon`false`
61
61
62
-
A form is technically allowed to have many fields with the same`name`, so multiple calls to`append`add more same-named fields.
62
+
Un formulaire est techniquement autorisé à avoir plusieurs champs avec le même`name`, donc plusieurs appels à`append`ajoute d'autres champs portant le même nom.
63
63
64
-
There's also method `set`, with the same syntax as`append`. The difference is that`.set`removes all fields with the given`name`, and then appends a new field. So it makes sure there's only one field with such `name`, the rest is just like `append`:
64
+
Il existe également la méthode `set`, avec la même syntaxe que`append`. La différence est que`.set`supprime tous les champs avec le`name` donné, puis ajoute un nouveau champ. Il s'assure donc qu'il n'y a qu'un seul champ avec ce genre de `name`, le reste est comme `append`:
65
65
66
66
-`formData.set(name, value)`,
67
67
-`formData.set(name, blob, fileName)`.
68
68
69
-
Also we can iterate over formData fields using `for..of`loop:
69
+
Nous pouvons également parcourir les champs formData en utilisant la boucle `for..of` :
alert(`${name} = ${value}`); // key1=value1, then key2=value2
78
+
alert(`${name} = ${value}`); // key1=value1, ensuite key2=value2
79
79
}
80
80
```
81
81
82
-
## Sending a form with a file
82
+
## Envoi d'un formulaire avec un fichier
83
83
84
-
The form is always sent as `Content-Type: form/multipart`, this encoding allows to send files. So, `<input type="file">`fields are sent also, similar to a usual form submission.
84
+
Le formulaire est toujours envoyé en tant que `Content-Type: formulaire/multipart`, cet encodage permet d'envoyer des fichiers. Ainsi, les champs `<input type="file">`sont également envoyés, comme pour une soumission de formulaire habituelle.
85
85
86
-
Here's an example with such form:
86
+
Voici un exemple avec ce genre de formulaire :
87
87
88
88
```html run autorun
89
89
<formid="formElem">
@@ -110,15 +110,15 @@ Here's an example with such form:
110
110
</script>
111
111
```
112
112
113
-
## Sending a form with Blob data
113
+
## Envoi d'un formulaire avec des données Blob
114
114
115
-
As we've seen in the chapter<info:fetch>, it's easy to send dynamically generated binary data e.g. an image, as `Blob`. We can supply it directly as `fetch` parameter `body`.
115
+
Comme nous l'avons vu dans le chapitre<info:fetch>, il est facile d'envoyer des données binaires générées dynamiquement, par exemple une image en tant que `Blob`. Nous pouvons le fournir directement en tant que paramètre `body` de `fetch`.
116
116
117
-
In practice though, it's often convenient to send an image not separately, but as a part of the form, with additional fields, such as "name" and other metadata.
117
+
En pratique cependant, il est souvent plus commode d'envoyer une image non pas séparément, mais en tant que partie du formulaire, avec des champs supplémentaires, tels que "name" et autres métadonnées.
118
118
119
-
Also, servers are usually more suited to accept multipart-encoded forms, rather than raw binary data.
119
+
En outre, les serveurs sont généralement plus adaptés pour accepter des formulaires encodés en plusieurs parties, plutôt que des données binaires brutes.
120
120
121
-
This example submits an image from `<canvas>`, along with some other fields, as a form, using `FormData`:
121
+
Cet exemple soumet une image à partir de `<canvas>`, ainsi que d'autres champs, sous forme de formulaire, en utilisant `FormData`:
122
122
123
123
```html run autorun height="90"
124
124
<bodystyle="margin:0">
@@ -154,36 +154,36 @@ This example submits an image from `<canvas>`, along with some other fields, as
That's same as if there were `<input type="file" name="image">`in the form, and the visitor submitted a file named `"image.png"` (3rd argument) with the data`imageBlob` (2nd argument) from their filesystem.
163
+
C'est comme s'il y avait `<input type="file" name="image">`dans le formulaire, et le visiteur a soumis un fichier nommé `"image.png"` (3ème argument) avec les données`imageBlob` (2ème argument) de son système de fichiers.
164
164
165
-
The server reads form data and the file, as if it were a regular form submission.
165
+
Le serveur lit les données du formulaire et le fichier, comme s'il s'agissait d'une soumission régulière de formulaire.
166
166
167
-
## Summary
167
+
## Résumé
168
168
169
-
[FormData](https://xhr.spec.whatwg.org/#interface-formdata)objects are used to capture HTML form and submit it using`fetch`or another network method.
169
+
Les objets [FormData](https://xhr.spec.whatwg.org/#interface-formdata)sont utilisés pour capturer le formulaire HTML et le soumettre en utilisant`fetch`ou une autre méthode réseau.
170
170
171
-
We can either create `new FormData(form)`from an HTML form, or create a object without a form at all, and then append fields with methods:
171
+
Nous pouvons soit créer un `new FormData(form)`à partir d'un formulaire HTML, soit créer un objet sans aucun formulaire, puis ajouter des champs avec des méthodes :
172
172
173
173
-`formData.append(name, value)`
174
174
-`formData.append(name, blob, fileName)`
175
175
-`formData.set(name, value)`
176
176
-`formData.set(name, blob, fileName)`
177
177
178
-
Let's note two peculiarities here:
178
+
Notons ici deux particularités :
179
179
180
-
1.The `set`method removes fields with the same name, `append` doesn't. That's the only difference between them.
181
-
2.To send a file, 3-argument syntax is needed, the last argument is a file name, that normally is taken from user filesystem for`<input type="file">`.
180
+
1.La méthode `set`supprime les champs du même nom, contrairement à `append`. C'est la seule différence entre eux.
181
+
2.Pour envoyer un fichier, une syntaxe à 3 arguments est nécessaire, le dernier argument est un nom de fichier, qui est normalement extrait du système de fichiers utilisateur pour`<input type="file">`.
0 commit comments