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
A[File](https://www.w3.org/TR/FileAPI/#dfn-file)object inherits from `Blob`and is extended with filesystem-related capabilities.
3
+
L'object[File](https://www.w3.org/TR/FileAPI/#dfn-file)hérite de `Blob`et est étendu avec des capacités liées au système de fichiers.
4
4
5
-
There are two ways to obtain it.
5
+
Il y a deux façons de l'obtenir.
6
6
7
-
First, there's a constructor, similar to`Blob`:
7
+
Premièrement, il y a un constructeur, similaire à`Blob`:
8
8
9
9
```js
10
10
newFile(fileParts, fileName, [options])
11
11
```
12
12
13
-
-**`fileParts`** -- is an array of Blob/BufferSource/String values.
14
-
-**`fileName`** -- file name string.
15
-
-**`options`** -- optional object:
16
-
-**`lastModified`** -- the timestamp (integer date) of last modification.
13
+
-**`fileParts`** -- est un tableau de valeurs Blob / BufferSource / Chaîne de caractères.
14
+
-**`fileName`** -- chaînes de caractères contenant le nom du fichier.
15
+
-**`options`** -- objet optionnel:
16
+
-**`lastModified`** -- l'horodatage (date entière) de la dernière modification.
17
17
18
-
Second, more often we get a file from `<input type="file">` or drag'n'drop or other browser interfaces. In that case, the file gets this information from OS.
18
+
Deuxièmement, le plus souvent, nous obtenons un fichier avec `<input type="file">`, en glisser-déposer ou d'autres interfaces de navigateur. Dans ce cas, le fichier obtient ces informations du système d'exploitation.
19
19
20
-
As`File`inherits from`Blob`, `File`objects have the same properties, plus:
21
-
-`name` -- the file name,
22
-
-`lastModified` -- the timestamp of last modification.
20
+
Comme`File`hérite de`Blob`, les objets `File`ont les mêmes propriétés, plus:
21
+
-`name` -- le nom du fichier,
22
+
-`lastModified` -- l'horodatage de la dernière modification.
23
23
24
-
That's how we can get a `File`object from`<input type="file">`:
24
+
Voici comment nous pouvons obtenir un objet `File`depuis`<input type="file">`:
25
25
26
26
```html run
27
27
<inputtype="file"onchange="showFile(this)">
@@ -37,49 +37,49 @@ function showFile(input) {
37
37
```
38
38
39
39
```smart
40
-
The input may select multiple files, so `input.files` is an array-like object with them. Here we have only one file, so we just take `input.files[0]`.
40
+
L'entrée peut sélectionner plusieurs fichiers, donc `input.files` est un objet de type tableau. Ici, nous n'avons qu'un seul fichier, donc nous prenons juste `input.files[0]`.
41
41
```
42
42
43
43
## FileReader
44
44
45
-
[FileReader](https://www.w3.org/TR/FileAPI/#dfn-filereader)is an object with the sole purpose of reading data from `Blob` (and hence `File` too) objects.
45
+
[FileReader](https://www.w3.org/TR/FileAPI/#dfn-filereader)est un objet dont le seul but est de lire les données des objets `Blob` (et donc aussi `File`).
46
46
47
-
It delivers the data using events, as reading from disk may take time.
47
+
Il fournit les données à l'aide d'événements, car la lecture à partir du disque peut prendre du temps.
48
48
49
-
The constructor:
49
+
Le constructeur:
50
50
51
51
```js
52
-
let reader =newFileReader(); //no arguments
52
+
let reader =newFileReader(); //aucun argument
53
53
```
54
54
55
-
The main methods:
55
+
Les méthodes principales:
56
56
57
-
-**`readAsArrayBuffer(blob)`** -- read the data in binary format `ArrayBuffer`.
58
-
-**`readAsText(blob, [encoding])`** -- read the data as a text string with the given encoding (`utf-8`by default).
59
-
-**`readAsDataURL(blob)`** -- read the binary data and encode it as base64 data url.
60
-
-**`abort()`** -- cancel the operation.
57
+
-**`readAsArrayBuffer(blob)`** -- lit les données au format binaire`ArrayBuffer`.
58
+
-**`readAsText(blob, [encoding])`** -- lit les données sous forme de chaîne de caractères avec l'encodage donné (`utf-8`par défaut).
59
+
-**`readAsDataURL(blob)`** -- lit les données binaires et les encode en base64 comme URL de données.
60
+
-**`abort()`** -- annule l'opération.
61
61
62
-
The choice of `read*`method depends on which format we prefer, how we're going to use the data.
62
+
Le choix de la méthode `read*`dépend du format que nous préférons, comment nous allons utiliser les données.
63
63
64
-
-`readAsArrayBuffer` -- for binary files, to do low-level binary operations. For high-level operations, like slicing, `File`inherits from`Blob`, so we can call them directly, without reading.
65
-
-`readAsText` -- for text files, when we'd like to get a string.
66
-
-`readAsDataURL` -- when we'd like to use this data in `src`for`img`or another tag. There's an alternative to reading a file for that, as discussed in chapter <info:blob>:`URL.createObjectURL(file)`.
64
+
-`readAsArrayBuffer` -- pour les fichiers binaires, pour effectuer des opérations binaires de bas niveau. Pour les opérations de haut niveau, comme le découpage, `File`hérite de`Blob`, nous pouvons donc les appeler directement, sans lire.
65
+
-`readAsText` -- pour les fichiers texte, lorsque nous souhaitons obtenir une chaîne de caractères.
66
+
-`readAsDataURL` -- quand nous utilisons ces données dans `src`pour`img`ou une autre balise. Il existe une alternative à la lecture d'un fichier, comme expliqué dans le chapitre <info:blob>:`URL.createObjectURL(file)`.
67
67
68
-
As the reading proceeds, there are events:
69
-
-`loadstart` -- loading started.
70
-
-`progress` -- occurs during reading.
71
-
-`load` -- no errors, reading complete.
72
-
-`abort` -- `abort()`called.
73
-
-`error` -- error has occurred.
74
-
-`loadend` -- reading finished with either success or failure.
68
+
Au fur et à mesure de la lecture, il y a des événements:
69
+
-`loadstart` -- chargement commencé.
70
+
-`progress` -- se produit pendant la lecture.
71
+
-`load` -- aucune erreur, lecture terminée.
72
+
-`abort` -- `abort()`est appelée.
73
+
-`error` -- une erreur est survenue.
74
+
-`loadend` -- lecture terminée avec succès ou échec.
75
75
76
-
When the reading is finished, we can access the result as:
77
-
-`reader.result`is the result (if successful)
78
-
-`reader.error`is the error (if failed).
76
+
Lorsque la lecture est terminée, nous pouvons accéder au résultat comme:
77
+
-`reader.result`est le résultat (en cas de succès)
78
+
-`reader.error`est l'erreur (en cas d'échec).
79
79
80
-
The most widely used events are for sure `load`and`error`.
80
+
Les événements les plus utilisés sont `load`et`error`.
81
81
82
-
Here's an example of reading a file:
82
+
Voici un exemple de lecture d'un fichier:
83
83
84
84
```html run
85
85
<inputtype="file"onchange="readFile(this)">
@@ -104,35 +104,35 @@ function readFile(input) {
104
104
</script>
105
105
```
106
106
107
-
```smart header="`FileReader`for blobs"
108
-
As mentioned in the chapter<info:blob>, `FileReader`can read not just files, but any blobs.
107
+
```smart header="`FileReader`pour les objets blob"
108
+
Comme mentionné dans le chapitre<info:blob>, `FileReader`peut lire non seulement les fichiers, mais tous les objets blob.
109
109
110
-
We can use it to convert a blob to another format:
111
-
-`readAsArrayBuffer(blob)` -- to`ArrayBuffer`,
112
-
-`readAsText(blob, [encoding])` -- to string (an alternative to`TextDecoder`),
113
-
-`readAsDataURL(blob)` -- to base64 data url.
110
+
Nous pouvons l'utiliser pour convertir un blob dans un autre format:
111
+
-`readAsArrayBuffer(blob)` -- en`ArrayBuffer`,
112
+
-`readAsText(blob, [encoding])` -- en chaîne de caractères (une alternative à`TextDecoder`),
113
+
-`readAsDataURL(blob)` -- en URL des données encoder en base64.
114
114
```
115
115
116
116
117
-
```smart header="`FileReaderSync` is available inside Web Workers"
118
-
For Web Workers, there also exists a synchronous variant of `FileReader`, called [FileReaderSync](https://www.w3.org/TR/FileAPI/#FileReaderSync).
117
+
```smart header="`FileReaderSync` est disponible dans Web Workers"
118
+
Pour les Web Workers, il existe également une variante synchrone de `FileReader`, appelée [FileReaderSync](https://www.w3.org/TR/FileAPI/#FileReaderSync).
119
119
120
-
Its reading methods `read*` do not generate events, but rather return a result, as regular functions do.
120
+
Ses méthodes de lecture `read*` ne génèrent pas d'événements, mais renvoient plutôt un résultat, comme le font les fonctions régulières.
121
121
122
-
That's only inside a Web Worker though, because delays in synchronous calls, that are possible while reading from files, in Web Workers are less important. They do not affect the page.
122
+
Cependant, ce ne fonctionne qu'à l'intérieur d'un Web Worker, car les retards dans les appels synchrones qui sont possibles lors de la lecture à partir de fichiers, sont moins importants dans les Web Workers . Ils n'affectent pas la page.
123
123
```
124
124
125
-
## Summary
125
+
## Résumé
126
126
127
-
`File`objects inherit from`Blob`.
127
+
Les objets `File`héritent de`Blob`.
128
128
129
-
In addition to `Blob` methods and properties, `File`objects also have `name`and`lastModified` properties, plus the internal ability to read from filesystem. We usually get `File`objects from user input, like `<input>`or Drag'n'Drop events (`ondragend`).
129
+
En plus des méthodes et propriétés `Blob`, les objets `File`ont également les propriétés `name`et`lastModified`, ainsi que la capacité interne de lire à partir du système de fichiers. Nous obtenons généralement des objets `File`à partir de l'entrée utilisateur, comme un `<input>`ou l'événement Drag'n'Drop (`ondragend`).
130
130
131
-
`FileReader`objects can read from a file or a blob, in one of three formats:
132
-
-String (`readAsText`).
131
+
les objets `FileReader`peuvent lire à partir d'un fichier ou d'un objet blob, dans l'un des trois formats:
132
+
-Chaînes de caractères (`readAsText`).
133
133
-`ArrayBuffer` (`readAsArrayBuffer`).
134
-
-Data url, base-64 encoded (`readAsDataURL`).
134
+
-URL des données, encodé en base64 (`readAsDataURL`).
135
135
136
-
In many cases though, we don't have to read the file contents. Just as we did with blobs, we can create a short url with`URL.createObjectURL(file)`and assign it to `<a>`or`<img>`. This way the file can be downloaded or shown up as an image, as a part of canvas etc.
136
+
Dans de nombreux cas cependant, nous n'avons pas à lire le contenu du fichier. Tout comme nous l'avons fait avec les blobs, nous pouvons créer une URL courte avec`URL.createObjectURL(fichier)`et l'assigner à `<a>`ou`<img>`. De cette façon, le fichier peut être téléchargé ou affiché sous forme d'image, comme partie de canevas, etc..
137
137
138
-
And if we're going to send a `File`over a network, that's also easy: network API like `XMLHttpRequest`or`fetch`natively accepts `File` objects.
138
+
Et si nous voulons envoyer un `File`sur un réseau, c'est aussi simple: une API réseau comme `XMLHttpRequest`ou`fetch`accepte nativement les objets `File`.
0 commit comments