From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/api/formdata/append/index.html | 180 +++++++++++++++++++++ files/ru/web/api/formdata/delete/index.html | 138 ++++++++++++++++ files/ru/web/api/formdata/entries/index.html | 125 ++++++++++++++ files/ru/web/api/formdata/formdata/index.html | 89 ++++++++++ files/ru/web/api/formdata/get/index.html | 74 +++++++++ files/ru/web/api/formdata/getall/index.html | 145 +++++++++++++++++ files/ru/web/api/formdata/has/index.html | 73 +++++++++ files/ru/web/api/formdata/index.html | 80 +++++++++ files/ru/web/api/formdata/keys/index.html | 70 ++++++++ files/ru/web/api/formdata/set/index.html | 77 +++++++++ .../api/formdata/using_formdata_objects/index.html | 141 ++++++++++++++++ files/ru/web/api/formdata/values/index.html | 70 ++++++++ 12 files changed, 1262 insertions(+) create mode 100644 files/ru/web/api/formdata/append/index.html create mode 100644 files/ru/web/api/formdata/delete/index.html create mode 100644 files/ru/web/api/formdata/entries/index.html create mode 100644 files/ru/web/api/formdata/formdata/index.html create mode 100644 files/ru/web/api/formdata/get/index.html create mode 100644 files/ru/web/api/formdata/getall/index.html create mode 100644 files/ru/web/api/formdata/has/index.html create mode 100644 files/ru/web/api/formdata/index.html create mode 100644 files/ru/web/api/formdata/keys/index.html create mode 100644 files/ru/web/api/formdata/set/index.html create mode 100644 files/ru/web/api/formdata/using_formdata_objects/index.html create mode 100644 files/ru/web/api/formdata/values/index.html (limited to 'files/ru/web/api/formdata') diff --git a/files/ru/web/api/formdata/append/index.html b/files/ru/web/api/formdata/append/index.html new file mode 100644 index 0000000000..10c6a75f26 --- /dev/null +++ b/files/ru/web/api/formdata/append/index.html @@ -0,0 +1,180 @@ +--- +title: FormData.append() +slug: Web/API/FormData/append +translation_of: Web/API/FormData/append +--- +

{{APIRef("XMLHttpRequest")}}

+ +

Метод append() из интерфейса {{domxref("FormData")}} добавляет новое значение в существующий ключ внутри объекта FormData, или создает ключ, в случае если он отсутствует.

+ +

Разница между {{domxref("FormData.set")}} и append() в том, что если заданный ключ уже существует, {{domxref("FormData.set")}} заменит данные в нем на новые, а append() добавит новое значение к остальным в конец.

+ +
+

Примечание: Данный метод также доступен в Web Workers.

+
+ +

Синтаксис

+ +

Существует две формы использования данной функции: с двумя и тремя параметрами:

+ +
formData.append(name, value);
+formData.append(name, value, filename);
+ +

Параметры

+ +
+
name
+
Имя поля, которое будет содержать данные из value.
+
value
+
Значение поля. В варианте с двумя параметрами, это является {{domxref("USVString")}}, если значение не является строкой, то оно будет в нее конвертировано. В варианте с тремя параметрами это может быть {{domxref("Blob")}}, {{domxref("File")}}, или {{domxref("USVString")}}, И снова, если ни один из них не указан в значении то оно будет конвертировано в строку.
+
filename {{optional_inline}}
+
Имя файла которое будет отправлено серверу ({{domxref("USVString")}}), когда {{domxref("Blob")}} или {{domxref("File")}} прошел проверку как второй параметр. Стандартное имя файла для {{domxref("Blob")}} объектов это "blob".
+
+ +
+

Note: Если вы укажете {{domxref("Blob")}} в качестве данных для включения в объект FormData, имя файла будет указано для сервера в заголовке "Content-Disposition" и может отличаться от браузера к браузеру.

+
+ +

Возвращает

+ +

Пустота.

+ +

Пример

+ +

Данная строка кода создает пустой FormData объект:

+ +
var formData = new FormData(); // Currently empty
+ +

Вы можете добавлять пару ключ/значение с помощью {{domxref("FormData.append")}}:

+ +
formData.append('username', 'Chris');
+formData.append('userpic', myFileInput.files[0], 'chris.jpg');
+ +

Также вы можете использовать обозначения массива для первого аргумента:

+ +
formData.append('userpic[]', myFileInput1.files[0], 'chris1.jpg');
+formData.append('userpic[]', myFileInput2.files[0], 'chris2.jpg');
+ +

Эта техника позволяет упростить мультифайловую загрузку данных потому, что в результате структура данных является более благоприятной для цикла.

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСостояниеЗаметки
{{SpecName('XMLHttpRequest','#dom-formdata-append','append()')}}{{Spec2('XMLHttpRequest')}}Initial definition
+ +

Поддержка

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support7{{CompatGeckoDesktop("2.0")}}[1]10125
append with filename{{CompatVersionUnknown}}{{CompatGeckoDesktop("22.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Available in web workers{{CompatVersionUnknown}}{{CompatGeckoDesktop("39.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE MobileOpera MobileSafari Mobile
Basic support3.0[2]{{CompatUnknown}}{{CompatGeckoMobile("2.0")}}[1]1.0.1{{CompatUnknown}} +

12

+ 		{{CompatUnknown}}
append with filename{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("22.0")}}1.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Available in web workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("39.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Prior to Gecko 7.0 {{geckoRelease("7.0")}}, if you specified a {{domxref("Blob")}} as the data to append to the object, the filename reported in the "Content-Disposition" HTTP header was an empty string; this resulted in errors being reported by some servers. Starting in Gecko 7.0 the filename "blob" is sent.

+ +

[2] XHR в Android 4.0 отправляет пустое содерживое FormData с blob.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/formdata/delete/index.html b/files/ru/web/api/formdata/delete/index.html new file mode 100644 index 0000000000..7335145f86 --- /dev/null +++ b/files/ru/web/api/formdata/delete/index.html @@ -0,0 +1,138 @@ +--- +title: FormData.delete() +slug: Web/API/FormData/delete +translation_of: Web/API/FormData/delete +--- +

{{APIRef("XMLHttpRequest")}}

+ +

Метод delete() интерфейса {{domxref("FormData")}} удаляет ключ и его зачение(-ия) из объекта FormData.

+ +
+

Note: Этот метод доступен в Web Workers.

+
+ +

Синтаксис

+ +
formData.delete(name);
+ +

Параметры

+ +
+
name
+
Имя ключа для удаления.
+
+ +

Возвращает

+ +

Нет.

+ +

Пример

+ +

Следующий код создает объект FormData и заполняет его парами "ключ"/"значение" из формы:

+ +
var formData = new FormData(myForm);
+ +

Вы можете удалить пару "ключ"/"значение" используя delete():

+ +
formData.delete('username');
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest','#dom-formdata-delete','delete()')}}{{Spec2('XMLHttpRequest')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("39.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
Available in web workers{{CompatVersionUnknown}}{{CompatGeckoDesktop("39.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}} +

{{CompatVersionUnknown}}

+ 		{{CompatNo}}
Available in web workers{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/ru/web/api/formdata/entries/index.html b/files/ru/web/api/formdata/entries/index.html new file mode 100644 index 0000000000..04c79a6589 --- /dev/null +++ b/files/ru/web/api/formdata/entries/index.html @@ -0,0 +1,125 @@ +--- +title: FormData.entries() +slug: Web/API/FormData/entries +tags: + - API + - FormData + - Iterator + - Method + - Reference + - XMLHttpRequest API +translation_of: Web/API/FormData/entries +--- +

{{APIRef("XMLHttpRequest")}}

+ +

Метод FormData.entries() возвращает {{jsxref("Iteration_protocols",'iterator')}}, позволяя пройтись по всем ключам/значениям в этом объекте. Ключ каждой пары - это объект {{domxref("USVString")}}, значение - это {{domxref("USVString")}} или {{domxref("Blob")}}.

+ +
+

Примечание: Метод доступен в Web Workers.

+
+ +

Синтаксис

+ +
formData.entries();
+ +

Возвращаемые значения

+ +

Возвращает {{jsxref("Iteration_protocols","iterator")}}.

+ +

Пример

+ +
// Create a test FormData object
+var formData = new FormData();
+formData.append('key1', 'value1');
+formData.append('key2', 'value2');
+
+// Display the key/value pairs
+for(var pair of formData.entries()) {
+   console.log(pair[0]+ ', '+ pair[1]);
+}
+
+ +

Резуьтат:

+ +
key1, value1
+key2, value2
+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('XMLHttpRequest','#dom-formdata','entries() (as iterator<>)')}}{{Spec2('XMLHttpRequest')}}Начальное опеределение
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatUnknown}}{{CompatGeckoDesktop(44)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(44)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

См. также

+ + diff --git a/files/ru/web/api/formdata/formdata/index.html b/files/ru/web/api/formdata/formdata/index.html new file mode 100644 index 0000000000..260388230f --- /dev/null +++ b/files/ru/web/api/formdata/formdata/index.html @@ -0,0 +1,89 @@ +--- +title: FormData() +slug: Web/API/FormData/FormData +translation_of: Web/API/FormData/FormData +--- +

{{APIRef("XMLHttpRequest")}}

+ +

Конструктор FormData() создает новые объект {{domxref("FormData")}}, если проще - HTML-форму.

+ +

Синтаксис

+ +
var formData = new FormData(form)
+ +

Параметры

+ +
+
form {{optional_inline}}
+
Существующая HTML-форма, на основе которой будет создана новая. Если ничего не указано, будет создана пустая форма.
+
+ +

Пример

+ +
<form name="test">
+  <input type="text" name="code" value="12345">
+  <input type="submit" value="Отправить">
+</form>
+ + + +
var
+    oldForm = document.forms.test,
+    formData = new FormData(oldForm)
+;
+
+console.log(
+    formData.get("code"),
+    formData === oldForm
+);
+
+
+ +

Методы

+ +
+

Подробнее о каждом методе можно прочитать, выбрав его в колонке слева.

+
+ +

Добавление нового текстового поля в форму:

+ +
formData.append(name, value, filename);
+
+ +

Удаление элемента формы:

+ +
formData.delete(name);
+ +

Получение значения элемента формы:

+ +
formData.get(name);
+
+ +

Проверка на наличие определенного элемента формы:

+ +
formData.has(name);
+ +

Изменение существующего элемента:

+ +
formData.set(name, value, filename);
+ +

Спецификация

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest','#dom-formdata','FormData()')}}{{Spec2('Fetch')}}
+ +

Поддержка браузерами

+ +
{{Compat("api.FormData.FormData")}}
diff --git a/files/ru/web/api/formdata/get/index.html b/files/ru/web/api/formdata/get/index.html new file mode 100644 index 0000000000..df52182d7b --- /dev/null +++ b/files/ru/web/api/formdata/get/index.html @@ -0,0 +1,74 @@ +--- +title: FormData.get() +slug: Web/API/FormData/get +translation_of: Web/API/FormData/get +--- +

{{APIRef("XMLHttpRequest")}}

+ +

Метод get() из интерфейса {{domxref("FormData")}} возвращает первое значение, связанное с переданным ключом из объекта FormData. Если вы ожидаете множественные значения и хотите получить их все, используйте метод getAll().

+ +
+

Примечание: Этот метод доступен в Web Workers.

+
+ +

Синтаксис

+ +
formData.get(name);
+ +

Параметры

+ +
+
name
+
{{domxref("USVString")}} строка, являющаяся именем ключа, значение которого вы хотите получить.
+
+ +

Возвращаемое значение

+ +

Значение из {{domxref("FormDataEntryValue")}}.

+ +

Пример

+ +

Следующий код создает пустой объект FormData:

+ +
var formData = new FormData();
+ +

Если мы добавим два значения  username, используя {{domxref("FormData.append")}}:

+ +
formData.append('username', 'Борис');
+formData.append('username', 'Кирилл');
+ +

То метод get() вернёт только первое добавленное значение username:

+ +
formData.get('username'); // Вернёт "Борис"
+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('XMLHttpRequest','#dom-formdata-get','get()')}}{{Spec2('XMLHttpRequest')}} 
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.FormData.get")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/formdata/getall/index.html b/files/ru/web/api/formdata/getall/index.html new file mode 100644 index 0000000000..24e12c408b --- /dev/null +++ b/files/ru/web/api/formdata/getall/index.html @@ -0,0 +1,145 @@ +--- +title: FormData.getAll() +slug: Web/API/FormData/getAll +translation_of: Web/API/FormData/getAll +--- +

{{APIRef("XMLHttpRequest")}}

+ +

getAll() - метод объекта {{domxref("FormData")}}, который возвращает все значения, связанные с ключом в объекте FormData.

+ +
+

Заметка: Этот метод доступен в Web Workers.

+
+ +

Синтаксис

+ +
formData.getAll(name);
+ +

Параметры

+ +
+
name
+
Строка формата {{domxref("USVString")}}, задающая имя ключа.
+
+ +

Возвращает

+ +

Массив значений типа {{domxref("FormDataEntryValue")}}, привязанных к ключу, переданному в параметре name. Если переданный ключ не существует, метод вернёт пустой массив.

+ +

Пример

+ +

Эта строка создаст пустой объект FormData:

+ +
var formData = new FormData();
+ +

Можем добавить два username при помощи {{domxref("FormData.append")}}:

+ +
formData.append('username', 'Борис');
+formData.append('username', 'Кирилл');
+ +

Тогда метод getAll() вернёт оба значения username в виде массива:

+ +
formData.getAll('username'); // Вернет ["Борис", "Кирилл"]
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('XMLHttpRequest','#dom-formdata-getall','getAll()')}}{{Spec2('XMLHttpRequest')}}
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(50.0)}}{{CompatGeckoDesktop("39.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
Available in web workers{{CompatChrome(50.0)}}{{CompatGeckoDesktop("39.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OS (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(50.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}} +

{{CompatVersionUnknown}}

+ 		{{CompatNo}}{{CompatChrome(50.0)}}
Available in web workers{{CompatNo}}{{CompatChrome(50.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatChrome(50.0)}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/formdata/has/index.html b/files/ru/web/api/formdata/has/index.html new file mode 100644 index 0000000000..a682e158ba --- /dev/null +++ b/files/ru/web/api/formdata/has/index.html @@ -0,0 +1,73 @@ +--- +title: FormData.has() +slug: Web/API/FormData/has +translation_of: Web/API/FormData/has +--- +

{{APIRef("XMLHttpRequest")}}

+ +

Метод has() из интерфейса {{domxref("FormData")}} возвращает логическое значение, указывающее, содержит ли объект FormData указанный ключ.

+ +
+

Примечание: Этот метод доступен в Web Workers.

+
+ +

Синтаксис

+ +
formData.has(name);
+ +

Параметры

+ +
+
name
+
{{domxref("USVString")}} представляет собой имя ключа, которое вы хотите проверить.
+
+ +

Возвращаемое значение

+ +

{{domxref("Boolean")}}.

+ +

Пример

+ +

Следующий код создаёт пустой объект FormData:

+ +
var formData = new FormData();
+ +

В следующем коде показаны результаты проверки существования  username в объекте FormData, до и после добавления значения username в {{domxref("FormData.append")}}:

+ +
formData.has('username'); // Returns false
+formData.append('username', 'Chris');
+formData.has('username'); // Returns true
+
+
+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('XMLHttpRequest','#dom-formdata-has','has()')}}{{Spec2('XMLHttpRequest')}}
+ +

Поддержка браузерами

+ + + +

{{Compat("api.FormData.has")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/formdata/index.html b/files/ru/web/api/formdata/index.html new file mode 100644 index 0000000000..35ea12c24a --- /dev/null +++ b/files/ru/web/api/formdata/index.html @@ -0,0 +1,80 @@ +--- +title: FormData +slug: Web/API/FormData +tags: + - API + - FormData + - Interface + - Reference + - XMLHttpRequest +translation_of: Web/API/FormData +--- +

{{APIRef("XMLHttpRequest")}}

+ +

XMLHttpRequest 2 добавляет поддержку для нового интерфейса FormData. Объекты FormData позволяют вам легко конструировать наборы пар ключ-значение, представляющие поля формы и их значения, которые в дальнейшем можно отправить с помощью метода send().

+ +

FormData использует такой же формат на выходе, как если бы мы отправляли обыкновенную форму с encoding установленным в "multipart/form-data".

+ +
+

Важно: О деталях использования FormData можно прочитать в статье Использование объекта FormData.

+
+ +

Конструктор

+ +
+
{{domxref("FormData.FormData","FormData()")}}
+
Создаёт объект FormData.
+
+ +

Методы

+ +
+
{{domxref("FormData.append")}}
+
Добавляет новое значение существующего поля объекта FormData, либо создаёт его и присваивает значение.
+
{{domxref("FormData.delete")}}
+
Удаляет пару ключ-значение из объекта FormData.
+
{{domxref("FormData.get")}}
+
Возвращает первое значение ассоциированное с переданным ключом из объекта FormData.
+
{{domxref("FormData.getAll")}}
+
Возвращает массив всех значений ассоциированных с переданным ключом из объекта FormData.
+
{{domxref("FormData.has")}}
+
Возвращает булево значение касательно наличия в объекте FormData  конкретной пары ключ-значение.
+
{{domxref("FormData.set")}}
+
Устанавливает новое значение для существующего ключа объекта FormData, или добавляет пару ключ-значение, если таковой не обнаружено в объекте.
+
+ +
+

Важно: Разница между {{domxref("FormData.set()")}} и {{domxref("FormData.append()")}} заключается в том, что если указанный ключ найден в объекте, {{domxref("FormData.set()")}} перезапишет его новым значением, тогда как {{domxref("FormData.append()")}} добавит новое значение в конец существующего. Смотрите дополнительные материалы с примерами. 

+
+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусПримечание
{{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}{{Spec2('XMLHttpRequest')}}FormData определен в XHR spec
+ +

Совместимость

+ + + +

{{Compat("api.FormData")}}

+ +

Смотри также

+ + diff --git a/files/ru/web/api/formdata/keys/index.html b/files/ru/web/api/formdata/keys/index.html new file mode 100644 index 0000000000..164b2b7a04 --- /dev/null +++ b/files/ru/web/api/formdata/keys/index.html @@ -0,0 +1,70 @@ +--- +title: FormData.keys() +slug: Web/API/FormData/keys +translation_of: Web/API/FormData/keys +--- +

{{APIRef("XMLHttpRequest")}}

+ +

FormData.keys() метод возвращает {{jsxref("Iteration_protocols",'iterator')}} позволяя пройтись по всем ключам содержащимся в этом объекте. Ключи являются {{domxref("USVString")}} объектами.

+ +
+

Примечание: Метод доступен в Web Workers.

+
+ +

Синтаксис

+ +
formData.keys();
+ +

Возвращаемые значения

+ +

Возвращает {{jsxref("Iteration_protocols","iterator")}}.

+ +

Пример

+ +
// Create a test FormData object
+var formData = new FormData();
+formData.append('key1', 'value1');
+formData.append('key2', 'value2');
+
+// Display the keys
+for (var key of formData.keys()) {
+   console.log(key);
+}
+
+ +

Результат:

+ +
key1
+key2
+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('XMLHttpRequest','#dom-formdata','keys() (as iterator<>)')}}{{Spec2('XMLHttpRequest')}}Начальное определение
+ +

Поддержка браузерами

+ + + +

{{Compat("api.FormData.keys")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/formdata/set/index.html b/files/ru/web/api/formdata/set/index.html new file mode 100644 index 0000000000..e07505b0f1 --- /dev/null +++ b/files/ru/web/api/formdata/set/index.html @@ -0,0 +1,77 @@ +--- +title: FormData.set() +slug: Web/API/FormData/set +translation_of: Web/API/FormData/set +--- +

{{APIRef("XMLHttpRequest")}}

+ +

Метод set() из интерфейса {{domxref("FormData")}} присваивает новое значение существующему ключу внутри объекта FormData , или добавляет ключ/значение если до этого они не были установлены.

+ +

Разница между set() и {{domxref("FormData.append")}} в том, что если заданный ключ уже существует, set() заменит данные в нем на новые, а {{domxref("FormData.append")}}  добавит новое значение к остальным в конец.

+ +
+

Примечание: Данный метод также доступен в Web Workers.

+
+ +

Синтаксис

+ +

Существует две формы использования данной функции: с двумя и тремя параметрами:

+ +
formData.set(name, value);
+formData.set(name, value, filename);
+ +

Параметры

+ +
+
name
+
Имя поля, которому будет присвоен value.
+
value
+
Значение, присваиваемое полю. В варианте с двумя параметрами, это USVString, если нет, то оно будет конвертировано. В варианте с тремя параметрами это может быть Blob, File, или USVString, И снова, если ни один из них не указан в значении то оно будет конвертировано в строку.
+
filename {{optional_inline}}
+
Имя файла, которое будет отправлено серверу (USVString), когда Blob или File прошел проверку как второй параметр. Стандартное имя файла для Blob объектов это "blob".
+
+ +
+

Примечание: Если вы укажете Blob в качестве данных для включения в объект FormData, имя файла будет указано для сервера в заголовке "Content-Disposition" и может отличаться от браузера к браузеру.

+
+ +

Пример

+ +

Следующий код создает пустой FormData объект:

+ +
var formData = new FormData(); // Сейчас пустой
+ +

Вы можете установить для него пару ключ/значение, используя {{domxref("FormData.set")}}:

+ +
formData.set('username', 'Chris');
+formData.set('userpic', myFileInput.files[0], 'chris.jpg');
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest','#dom-formdata-set','set()')}}{{Spec2('XMLHttpRequest')}}
+ +

Browser compatibility

+ +
{{Compat("api.FormData.set")}}
+ +

See also

+ + diff --git a/files/ru/web/api/formdata/using_formdata_objects/index.html b/files/ru/web/api/formdata/using_formdata_objects/index.html new file mode 100644 index 0000000000..0e2b1312ec --- /dev/null +++ b/files/ru/web/api/formdata/using_formdata_objects/index.html @@ -0,0 +1,141 @@ +--- +title: Использование Объектов FormData +slug: Web/API/FormData/Using_FormData_Objects +translation_of: Web/API/FormData/Using_FormData_Objects +--- +

Объект FormData позволяет создать набор пар ключ/значение и передать их, используя XMLHttpRequest. Объект FormData предназначен для передачи данных форм, однако может быть использован для передачи пар ключ/значение независимо от форм. Данные передаются в том же формате, как и данные, передаваемые методом {{domxref("HTMLFormElement.submit","submit()")}} формы, с установленной кодировкой enctype="multipart/form-data".

+ +

Создание объекта FormData

+ +

Вы можете самостоятельно создать пустой объект FormData, наполнив его затем данными, используя его метод {{domxref("FormData.append","append()")}}:

+ +
var formData = new FormData();
+
+formData.append("username", "Groucho");
+formData.append("accountnum", 123456); // число 123456 немедленно преобразуется в строку "123456"
+
+// Файл, выбранный пользователем
+formData.append("userfile", fileInputElement.files[0]);
+
+// JavaScript Blob объект
+var content = '<a id="a"><b id="b">hey!</b></a>'; // содержимое нового файла...
+var blob = new Blob([content], { type: "text/xml"});
+
+formData.append("webmasterfile", blob);
+
+var request = new XMLHttpRequest();
+request.open("POST", "http://foo.com/submitform.php");
+request.send(formData);
+
+ +
Примечание:  Поля "userfile" и "webmasterfile" оба содержат файлы. Число, переданное полю "accountnum" немедленно преобразуется в строку. Преобразование осуществляется методом FormData.append() (Значение поля может быть {{ domxref("Blob") }}, {{ domxref("File") }}, или строкой: если значение не является ни Blob, ни File, то оно автоматически преобразуется в строку).
+ +

Данный пример показывает создание экземпляра FormData, содержащего поля "username", "accountnum", "userfile" и "webmasterfile". Экземпляр FormData затем отправляется при помощи метода send() объекта XMLHttpRequest. Поле "webmasterfile" является экземпляром класса {{domxref("Blob")}}. Объект класса Blob является файло-подобным объектом, содержащим "сырые" данные. Определение данных как Blob не является обязательным в нативном javascript. Интерфейс {{ domxref("File") }} базируется на Blob, наследуя его функциональность и расширяя его для поддержки файлов в ОС пользователя. Для создания объектов класса Blob используйте {{domxref("Blob.Blob","Blob() constructor")}}.

+ +

Получение объекта FormData из HTML формы

+ +

Для создания объекта FormDatа, содержащего данные существующей формы ({{ HTMLElement("form") }}) передайте форму в качестве аргумента при создании объекта FormData:

+ +
+

Примечание: FormData будет использовать только те поля ввода, которые используют атрибут name.

+
+ +
var formData = new FormData(someFormElement);
+
+ +

Например:

+ +
var formElement = document.querySelector("form");
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+request.send(new FormData(formElement));
+
+ +

Вы так же можете добавить дополнительные данные в объект FormData после его создания и до отправки данных:

+ +
var formElement = document.querySelector("form");
+var formData = new FormData(formElement);
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+formData.append("serialnumber", serialNumber++);
+request.send(formData);
+ +

Такой приём позволяет включать в форму дополнительную информацию, которая, например, не нуждается в демонстрации пользователю.

+ +

Отправка файлов при помощи объекта FormData

+ +

Вы так же можете отправлять файлы при помощи FormData. Просто включите {{ HTMLElement("input") }} с типом file в форму.

+ +
<form enctype="multipart/form-data" method="post" name="fileinfo">
+  <label>Your email address:</label>
+  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
+  <label>Custom file label:</label>
+  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
+  <label>File to stash:</label>
+  <input type="file" name="file" required />
+  <input type="submit" value="Stash the file!" />
+</form>
+<div></div>
+
+ +

Затем вы сможете отправить выбранный файл следующим образом:

+ +
var form = document.forms.namedItem("fileinfo");
+form.addEventListener('submit', function(ev) {
+
+  var oOutput = document.querySelector("div"),
+      oData = new FormData(form);
+
+  oData.append("CustomField", "This is some extra data");
+
+  var oReq = new XMLHttpRequest();
+  oReq.open("POST", "stash.php", true);
+  oReq.onload = function(oEvent) {
+    if (oReq.status == 200) {
+      oOutput.innerHTML = "Uploaded!";
+    } else {
+      oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>";
+    }
+  };
+
+  oReq.send(oData);
+  ev.preventDefault();
+}, false);
+
+ +
+

Примечание: Если для формы указан атрибут method, то будет использован именно этот метод для отправки данных на сервер, а не метод, указанный в вызове open()

+
+ +

Вы так же можете добавить {{ domxref("File") }} или {{ domxref("Blob") }} непосредственно к объекту {{ domxref("FormData") }}:

+ +
data.append("myfile", myBlob, "filename.txt");
+
+ +

Метод {{domxref("FormData.append","append()")}} принимает 3й опциональный параметр - название файла, которое добавляется в заголовок Content-Disposition при отправке на сервер. Если название файла не указано (или данный параметр не поддерживается) используется имя "blob".

+ +

Вы так же можете использовать FormData с jQuery:

+ +
var fd = new FormData(document.querySelector("form"));
+fd.append("CustomField", "This is some extra data");
+$.ajax({
+  url: "stash.php",
+  type: "POST",
+  data: fd,
+  processData: false,  // Сообщить jQuery не передавать эти данные
+  contentType: false   // Сообщить jQuery не передавать тип контента
+});
+
+ +

Отправка форм и файлов при помощи AJAX без использования объекта FormData

+ +

Если вы заинтересованы в отправке форм и файлов при помощи AJAX без использования FormData, прочитайте /ru/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files

+ +

See also

+ + diff --git a/files/ru/web/api/formdata/values/index.html b/files/ru/web/api/formdata/values/index.html new file mode 100644 index 0000000000..55026a018f --- /dev/null +++ b/files/ru/web/api/formdata/values/index.html @@ -0,0 +1,70 @@ +--- +title: FormData.values() +slug: Web/API/FormData/values +translation_of: Web/API/FormData/values +--- +

{{APIRef("XMLHttpRequest")}}

+ +

The FormData.values() метод возвращает {{jsxref("Iteration_protocols",'iterator')}} позволяя пройтись по всем значениям в этом объекте. Значения - это {{domxref("USVString")}} или {{domxref("Blob")}} объекты.

+ +
+

Примечание: Метод доступен в Web Workers.

+
+ +

Синтаксис

+ +
formData.values();
+ +

Возвращаемые значения

+ +

Возвращает {{jsxref("Iteration_protocols","iterator")}}.

+ +

Пример

+ +
// Create a test FormData object
+var formData = new FormData();
+formData.append('key1', 'value1');
+formData.append('key2', 'value2');
+
+// Display the values
+for (var value of formData.values()) {
+   console.log(value);
+}
+
+ +

Результат:

+ +
value1
+value2
+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('XMLHttpRequest','#dom-formdata','values() (as iterator<>)')}}{{Spec2('XMLHttpRequest')}}Начальное определение
+ +

Поддержка браузерами

+ + + +

{{Compat("api.FormData.values")}}

+ +

Смотрите также

+ + -- cgit v1.2.3-54-g00ecf