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
+13-13Lines changed: 13 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
2
2
# FormData
3
3
4
-
Éste capítulo se trata del envío de formularios HTML: con o sin archivos, con campos adicionales y cosas similares.
4
+
Éste capítulo trata sobre el envío de formularios HTML: con o sin archivos, con campos adicionales y cosas similares.
5
5
6
6
Los objetos [FormData](https://xhr.spec.whatwg.org/#interface-formdata) pueden ser de ayuda en esta tarea. Tal como habrás supuesto, éste es el objeto encargado de representar los datos de los formularios HTML.
7
7
@@ -14,18 +14,18 @@ Si se le brinda un elemento HTML `form`, el objeto automáticamente capturará s
14
14
15
15
Lo que hace especial al objeto `FormData` es que los métodos de red, tales como `fetch`, pueden aceptar un objeto `FormData` como el cuerpo. Es codificado y enviado como `Content-Type: multipart/form-data`.
16
16
17
-
Desde el punto de vista del servidor, se vé como una entrega normal.
17
+
Desde el punto de vista del servidor, se ve como una entrega normal.
18
18
19
-
## Enviando un simple formulario
19
+
## Enviando un formulario simple
20
20
21
21
Enviemos un formulario simple.
22
22
23
23
Tal como se puede ver, es prácticamente una línea:
24
24
25
25
```html run autorun
26
26
<formid="formElem">
27
-
<inputtype="text"name="nombre"value="John">
28
-
<inputtype="text"name="apellido"value="Smith">
27
+
<inputtype="text"name="name"value="John">
28
+
<inputtype="text"name="surname"value="Smith">
29
29
<inputtype="submit">
30
30
</form>
31
31
@@ -55,13 +55,13 @@ Contamos con métodos para poder modificar los campos del `FormData`:
55
55
56
56
-`formData.append(name, value)` - agrega un campo al formulario con el nombre `name` y el valor `value`,
57
57
-`formData.append(name, blob, fileName)` - agrega un campo tal como si se tratara de un `<input type="file">`, el tercer argumento `fileName` establece el nombre del archivo (no el nombre del campo), tal como si se tratara del nombre del archivo en el sistema de archivos del usuario,
58
-
-`formData.delete(name)` - remove el campo de nombre `name`,
58
+
-`formData.delete(name)` - elimina el campo de nombre `name`,
59
59
-`formData.get(name)` - obtiene el valor del campo con el nombre `name`,
60
-
-`formData.has(name)` - en caso de que exista el campo con el nombre `name`, retorna`true`, de lo contrario `false`
60
+
-`formData.has(name)` - en caso de que exista el campo con el nombre `name`, devuelve`true`, de lo contrario `false`
61
61
62
62
Un formulario técnicamente tiene permitido contar con muchos campos con el mismo atributo `name`, por lo que múltiples llamadas a `append` agregarán más campos con el mismo nombre.
63
63
64
-
Por otra parte existe un método `set`, con la misma sintáxis que `append`. La diferencia está en que `.set` remueve todos los campos con el `name` que se le ha pasado, y luego agrega el nuevo campo. De este modo nos aseguramos de que sólo un campo éxiste con determinado `name`, el resto es tal cómo en `append`:
64
+
Por otra parte existe un método `set`, con la misma sintáxis que `append`. La diferencia está en que `.set` remueve todos los campos con el `name` que se le ha pasado, y luego agrega el nuevo campo. De este modo nos aseguramos de que sólo un campo éxiste con determinado `name`, el resto es tal como en `append`:
65
65
66
66
-`formData.set(name, value)`,
67
67
-`formData.set(name, blob, fileName)`.
@@ -112,7 +112,7 @@ Aquí un ejemplo con un formulario de éste tipo:
112
112
113
113
## Enviando un formulario con datos Blob
114
114
115
-
Tal como pudimos ver en el capítulo <info:fetch>, es fácil enviar datos binarios generados dinámicamente ej. una imagen, como `Blob`. Podemos simplemente proporcionarla a`fetch`como un parametro en el`body`.
115
+
Tal como pudimos ver en el capítulo <info:fetch>, es fácil enviar datos binarios generados dinámicamente (por ejemplo una imagen) como `Blob`. Podemos proporcionarlos directamente en un`fetch`con el parámetro`body`.
116
116
117
117
De todos modos en la práctica, suele ser conveniente enviar la imagen como parte del formulario junto a otra meta data tal como el nombre y no de forma separada.
118
118
@@ -154,21 +154,21 @@ Este ejemplo envía una imagen desde un `<canvas>`, junto con algunos campos má
154
154
</body>
155
155
```
156
156
157
-
Note como la imagen `Blob` es agregada:
157
+
Nota como la imagen `Blob` es agregada:
158
158
159
159
```js
160
160
formData.append("image", imageBlob, "image.png");
161
161
```
162
162
163
-
Se obtiene el mismo resultado tal como si se tuviese un campo `<input type="file" name="image">` en el formulario, y el usuario enviara un archivo con nombre `"image.png"` (3er argumento) con los datos `imageBlob` (2do argumento) desde su sistema de archivos.
163
+
Es lo mismo que si hubiera un campo `<input type="file" name="image">` en el formulario, y el usuario enviara un archivo con nombre `"image.png"` (3er argumento) con los datos `imageBlob` (2do argumento) desde su sistema de archivos.
164
164
165
165
El servidor lee el formulario `form-data` y el archivo tal como si de un formulario regular se tratara.
166
166
167
167
## Resumen
168
168
169
-
[FormData](https://xhr.spec.whatwg.org/#interface-formdata)objetos utilizados para capturar un formulario HTML y enviarlo utilizando `fetch` u otro método de red.
169
+
Los objetos [FormData](https://xhr.spec.whatwg.org/#interface-formdata)son utilizados para capturar un formulario HTML y enviarlo utilizando `fetch` u otro método de red.
170
170
171
-
Podemos de este modo utilizar`new FormData(form)`tal que from es un elemento formulario HTML, o crear un objeto sin un formulario en absoluto, y agregar los campos con los siguientes métodos:
171
+
Podemos crear el objeto con`new FormData(form)`desde un formulario HTML, o crearlo sin un formulario en absoluto, y agregar los campos con los siguientes métodos:
0 commit comments