Skip to content

Commit fdb396c

Browse files
authored
Merge pull request #135 from HachemiH/master
FormData
2 parents af55442 + 3fba444 commit fdb396c

File tree

1 file changed

+40
-40
lines changed

1 file changed

+40
-40
lines changed

5-network/02-formdata/article.md

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11

22
# FormData
33

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...
55

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.
77

8-
The constructor is:
8+
Le constructeur est :
99
```js
1010
let formData = new FormData([form]);
1111
```
1212

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.
1414

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`.
1616

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.
1818

19-
## Sending a simple form
19+
## Envoi d'un formulaire simple
2020

21-
Let's send a simple form first.
21+
Envoyons d'abord un formulaire simple.
2222

23-
As you can see, that's almost one-liner:
23+
Comme vous pouvez le voir, c'est presque une ligne :
2424

2525
```html run autorun
2626
<form id="formElem">
@@ -47,26 +47,26 @@ As you can see, that's almost one-liner:
4747
</script>
4848
```
4949

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".
5151

52-
## FormData Methods
52+
## Méthodes FormData
5353

54-
We can modify fields in `FormData` with methods:
54+
Nous pouvons modifier les champs dans `FormData` avec des méthodes :
5555

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`
6161

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.
6363

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` :
6565

6666
- `formData.set(name, value)`,
6767
- `formData.set(name, blob, fileName)`.
6868

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` :
7070

7171
```js run
7272
let formData = new FormData();
@@ -75,15 +75,15 @@ formData.append('key2', 'value2');
7575

7676
// List key/value pairs
7777
for(let [name, value] of formData) {
78-
alert(`${name} = ${value}`); // key1=value1, then key2=value2
78+
alert(`${name} = ${value}`); // key1=value1, ensuite key2=value2
7979
}
8080
```
8181

82-
## Sending a form with a file
82+
## Envoi d'un formulaire avec un fichier
8383

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.
8585

86-
Here's an example with such form:
86+
Voici un exemple avec ce genre de formulaire :
8787

8888
```html run autorun
8989
<form id="formElem">
@@ -110,15 +110,15 @@ Here's an example with such form:
110110
</script>
111111
```
112112

113-
## Sending a form with Blob data
113+
## Envoi d'un formulaire avec des données Blob
114114

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`.
116116

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.
118118

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.
120120

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` :
122122

123123
```html run autorun height="90"
124124
<body style="margin:0">
@@ -154,36 +154,36 @@ This example submits an image from `<canvas>`, along with some other fields, as
154154
</body>
155155
```
156156

157-
Please note how the image `Blob` is added:
157+
Veuillez noter comment l'image `Blob` est ajoutée :
158158

159159
```js
160160
formData.append("image", imageBlob, "image.png");
161161
```
162162

163-
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.
164164

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.
166166

167-
## Summary
167+
## Résumé
168168

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.
170170

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

173173
- `formData.append(name, value)`
174174
- `formData.append(name, blob, fileName)`
175175
- `formData.set(name, value)`
176176
- `formData.set(name, blob, fileName)`
177177

178-
Let's note two peculiarities here:
178+
Notons ici deux particularités :
179179

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">`.
182182

183-
Other methods are:
183+
Les autres méthodes sont :
184184

185185
- `formData.delete(name)`
186186
- `formData.get(name)`
187187
- `formData.has(name)`
188188

189-
That's it!
189+
C'est tout !

0 commit comments

Comments
 (0)