diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/api/formdata | |
parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip |
initial commit
Diffstat (limited to 'files/ru/web/api/formdata')
-rw-r--r-- | files/ru/web/api/formdata/append/index.html | 180 | ||||
-rw-r--r-- | files/ru/web/api/formdata/delete/index.html | 138 | ||||
-rw-r--r-- | files/ru/web/api/formdata/entries/index.html | 125 | ||||
-rw-r--r-- | files/ru/web/api/formdata/formdata/index.html | 89 | ||||
-rw-r--r-- | files/ru/web/api/formdata/get/index.html | 74 | ||||
-rw-r--r-- | files/ru/web/api/formdata/getall/index.html | 145 | ||||
-rw-r--r-- | files/ru/web/api/formdata/has/index.html | 73 | ||||
-rw-r--r-- | files/ru/web/api/formdata/index.html | 80 | ||||
-rw-r--r-- | files/ru/web/api/formdata/keys/index.html | 70 | ||||
-rw-r--r-- | files/ru/web/api/formdata/set/index.html | 77 | ||||
-rw-r--r-- | files/ru/web/api/formdata/using_formdata_objects/index.html | 141 | ||||
-rw-r--r-- | files/ru/web/api/formdata/values/index.html | 70 |
12 files changed, 1262 insertions, 0 deletions
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 +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p>Метод <code><strong>append()</strong></code> из интерфейса {{domxref("FormData")}} добавляет новое значение в существующий ключ внутри объекта <code>FormData</code>, или создает ключ, в случае если он отсутствует.</p> + +<p>Разница между {{domxref("FormData.set")}} и <code>append()</code> в том, что если заданный ключ уже существует, {{domxref("FormData.set")}} заменит данные в нем на новые, а <code>append()</code> добавит новое значение к остальным в конец.</p> + +<div class="note"> +<p><span style="font-size: 14px; line-height: 21px;"><strong>Примечание</strong></span>: Данный метод также доступен в <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<p>Существует две формы использования данной функции: с двумя и тремя параметрами:</p> + +<pre class="brush: js">formData.append(name, value); +formData.append(name, value, filename);</pre> + +<h3 id="append()_Parameters" name="append()_Parameters">Параметры</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Имя поля, которое будет содержать данные из <code>value</code>.</dd> + <dt><code>value</code></dt> + <dd>Значение поля. В варианте с двумя параметрами, это является {{domxref("USVString")}}, если значение не является строкой, то оно будет в нее конвертировано. В варианте с тремя параметрами это может быть {{domxref("Blob")}}, {{domxref("File")}}, или {{domxref("USVString")}}, И снова, если ни один из них не указан в значении то оно будет конвертировано в строку.</dd> + <dt><code>filename </code>{{optional_inline}}</dt> + <dd>Имя файла которое будет отправлено серверу ({{domxref("USVString")}}), когда {{domxref("Blob")}} или {{domxref("File")}} прошел проверку как второй параметр. Стандартное имя файла для {{domxref("Blob")}} объектов это "blob".</dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> Если вы укажете {{domxref("Blob")}} в качестве данных для включения в объект <code>FormData</code>, имя файла будет указано для сервера в заголовке "Content-Disposition" и может отличаться от браузера к браузеру.</p> +</div> + +<h3 id="Возвращает">Возвращает</h3> + +<p>Пустота.</p> + +<h2 id="Пример">Пример</h2> + +<p>Данная строка кода создает пустой <code>FormData</code> объект:</p> + +<pre class="brush: js">var formData = new FormData(); // Currently empty</pre> + +<p>Вы можете добавлять пару ключ/значение с помощью {{domxref("FormData.append")}}:</p> + +<pre class="brush: js">formData.append('username', 'Chris'); +formData.append('userpic', myFileInput.files[0], 'chris.jpg');</pre> + +<p>Также вы можете использовать обозначения массива для первого аргумента:</p> + +<pre class="brush: js">formData.append('userpic[]', myFileInput1.files[0], 'chris1.jpg'); +formData.append('userpic[]', myFileInput2.files[0], 'chris2.jpg');</pre> + +<p>Эта техника позволяет упростить мультифайловую загрузку данных потому, что в результате структура данных является более благоприятной для цикла.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Состояние</th> + <th scope="col">Заметки</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#dom-formdata-append','append()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка">Поддержка</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>7</td> + <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup></td> + <td>10</td> + <td>12</td> + <td>5</td> + </tr> + <tr> + <td>append with filename</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Available in web workers</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("39.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>3.0<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}<sup>[1]</sup></td> + <td>1.0.1</td> + <td>{{CompatUnknown}}</td> + <td> + <p>12</p> + </td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>append with filename</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("22.0")}}</td> + <td>1.2</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Available in web workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("39.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[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.</p> + +<p>[2] XHR в Android 4.0 отправляет пустое содерживое FormData с blob.</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> 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 +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p>Метод <code><strong>delete()</strong></code> интерфейса {{domxref("FormData")}} удаляет ключ и его зачение(-ия) из объекта <code>FormData</code>.</p> + +<div class="note"> +<p><strong>Note</strong>: Этот метод доступен в <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush: js">formData.delete(name);</pre> + +<h3 id="append()_Parameters" name="append()_Parameters">Параметры</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Имя ключа для удаления.</dd> +</dl> + +<h3 id="Возвращает">Возвращает</h3> + +<p>Нет.</p> + +<h2 id="Пример">Пример</h2> + +<p>Следующий код создает объект <code>FormData</code> и заполняет его парами "ключ"/"значение" из формы:</p> + +<pre class="brush: js">var formData = new FormData(myForm);</pre> + +<p>Вы можете удалить пару "ключ"/"значение" используя <code>delete()</code>:</p> + +<pre class="brush: js">formData.delete('username'); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#dom-formdata-delete','delete()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("39.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Available in web workers</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("39.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Available in web workers</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> 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 +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p>Метод <code><strong>FormData.entries()</strong></code> возвращает {{jsxref("Iteration_protocols",'iterator')}}, позволяя пройтись по всем ключам/значениям в этом объекте. Ключ каждой пары - это объект {{domxref("USVString")}}, значение - это {{domxref("USVString")}} или {{domxref("Blob")}}.</p> + +<div class="note"> +<p><strong>Примечание</strong>: Метод доступен в <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">formData.entries();</pre> + +<h3 id="Возвращаемые_значения">Возвращаемые значения</h3> + +<p>Возвращает {{jsxref("Iteration_protocols","iterator")}}.</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: js;highlight:[7] notranslate">// 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]); +} +</pre> + +<p>Резуьтат:</p> + +<pre class="notranslate">key1, value1 +key2, value2</pre> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#dom-formdata','entries() (as iterator<>)')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Начальное опеределение</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(44)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(44)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="См._также">См. также</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> 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 +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p>Конструктор <code><strong>FormData()</strong></code> создает новые объект {{domxref("FormData")}}, если проще - HTML-форму<strong>.</strong></p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush: js"><code>var formData = new FormData(</code><code>form</code><code>)</code></pre> + +<h3 id="Parameters" name="Parameters">Параметры</h3> + +<dl> + <dt><code>form </code>{{optional_inline}}</dt> + <dd>Существующая HTML-форма, на основе которой будет создана новая. Если ничего не указано, будет создана пустая форма.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: html"><form name="test"> + <input type="text" name="code" value="12345"> + <input type="submit" value="Отправить"> +</form></pre> + + + +<pre class="brush: js">var + oldForm = document.forms.test, + formData = new FormData(oldForm) +; + +console.log( + formData.get("code"), + formData === oldForm +); + +</pre> + +<h3 id="Методы">Методы</h3> + +<div class="note"> +<p>Подробнее о каждом методе можно прочитать, выбрав его в колонке слева.</p> +</div> + +<p>Добавление нового текстового поля в форму:</p> + +<pre class="brush: js">formData.append(name, value, filename); +</pre> + +<p>Удаление элемента формы:</p> + +<pre class="brush: js language-js"><code class="language-js">formData<span class="punctuation token">.</span><span class="keyword token">delete</span><span class="punctuation token">(</span>name<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Получение значения элемента формы:</p> + +<pre class="brush: js">formData.get(name); +</pre> + +<p>Проверка на наличие определенного элемента формы:</p> + +<pre class="brush: js">formData.has(name);</pre> + +<p>Изменение существующего элемента:</p> + +<pre class="brush: js language-js"><code class="language-js">formData<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span>name<span class="punctuation token">,</span> value<span class="punctuation token">,</span> filename<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#dom-formdata','FormData()')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div>{{Compat("api.FormData.FormData")}}</div> 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 +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p>Метод get() из интерфейса {{domxref("FormData")}} возвращает первое значение, связанное с переданным ключом из объекта FormData. Если вы ожидаете множественные значения и хотите получить их все, используйте метод getAll().</p> + +<div class="note"> +<p>Примечание: Этот метод доступен в <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">formData.get(name);</pre> + +<h3 id="append()_Parameters" name="append()_Parameters">Параметры</h3> + +<dl> + <dt><code>name</code></dt> + <dd>{{domxref("USVString")}} строка, являющаяся именем ключа, значение которого вы хотите получить.</dd> +</dl> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<p>Значение из {{domxref("FormDataEntryValue")}}.</p> + +<h2 id="Пример">Пример</h2> + +<p>Следующий код создает пустой объект <code>FormData</code>:</p> + +<pre class="brush: js">var formData = new FormData();</pre> + +<p>Если мы добавим два значения <code>username,</code> используя {{domxref("FormData.append")}}:</p> + +<pre class="brush: js">formData.append('username', 'Борис'); +formData.append('username', 'Кирилл');</pre> + +<p>То метод <code>get()</code> вернёт только первое добавленное значение <code>username</code>:</p> + +<pre class="brush: js">formData.get('username'); // Вернёт "Борис"</pre> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#dom-formdata-get','get()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести исправления, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div> + +<p>{{Compat("api.FormData.get")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Использование XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Использование FormData objects</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> 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 +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p><code><strong>getAll()</strong></code> - метод объекта {{domxref("FormData")}}, который возвращает все значения, связанные с ключом в объекте FormData.</p> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>Заметка</strong></span>: Этот метод доступен в <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush: js notranslate">formData.getAll(name);</pre> + +<h3 id="append_Parameters" name="append()_Parameters">Параметры</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Строка формата {{domxref("USVString")}}, задающая имя ключа.</dd> +</dl> + +<h3 id="Возвращает">Возвращает</h3> + +<p>Массив значений типа {{domxref("FormDataEntryValue")}}, привязанных к ключу, переданному в параметре <code>name</code>. Если переданный ключ не существует, метод вернёт пустой массив.</p> + +<h2 id="Пример">Пример</h2> + +<p>Эта строка создаст пустой объект FormData:</p> + +<pre class="brush: js notranslate">var formData = new FormData();</pre> + +<p>Можем добавить два <code>username</code> при помощи {{domxref("FormData.append")}}:</p> + +<pre class="brush: js notranslate">formData.append('username', 'Борис'); +formData.append('username', 'Кирилл');</pre> + +<p>Тогда метод <code>getAll()</code> вернёт оба значения <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">username</span></font> в виде массива:</p> + +<pre class="brush: js notranslate">formData.getAll('username'); // Вернет ["Борис", "Кирилл"]</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#dom-formdata-getall','getAll()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatGeckoDesktop("39.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Available in web workers</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatGeckoDesktop("39.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + </tr> + <tr> + <td>Available in web workers</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> 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 +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p>Метод <code><strong>has()</strong></code> из интерфейса {{domxref("FormData")}} возвращает логическое значение, указывающее, содержит ли объект <code>FormData</code> указанный ключ.</p> + +<div class="note"> +<p>Примечание: Этот метод доступен в <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush: js">formData.has(name);</pre> + +<h3 id="append_Parameters" name="append()_Parameters">Параметры</h3> + +<dl> + <dt><code>name</code></dt> + <dd>{{domxref("USVString")}} представляет собой имя ключа, которое вы хотите проверить.</dd> +</dl> + +<h3 class="highlight-spanned" id="Возвращаемое_значение"><span class="highlight-span">Возвращаемое значение</span></h3> + +<p>{{domxref("Boolean")}}.</p> + +<h2 id="Пример">Пример</h2> + +<p>Следующий код создаёт пустой объект <code>FormData</code>:</p> + +<pre class="brush: js">var formData = new FormData();</pre> + +<p>В следующем коде показаны результаты проверки существования <code>username</code> в объекте <code>FormData</code>, до и после добавления значения <code>username</code> в {{domxref("FormData.append")}}:</p> + +<pre class="brush: js">formData.has('username'); // Returns false +formData.append('username', 'Chris'); +formData.has('username'); // Returns true + +</pre> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#dom-formdata-has','has()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("api.FormData.has")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Использование XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Использование объекта FormData</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> 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 +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p>XMLHttpRequest 2 добавляет поддержку для нового интерфейса FormData. Объекты FormData позволяют вам легко конструировать наборы пар ключ-значение, представляющие поля формы и их значения, которые в дальнейшем можно отправить с помощью метода <a href="/en-US/docs/DOM/XMLHttpRequest#send()" title="XMLHttpRequest#send()"><code>send()</code></a>.</p> + +<p>FormData использует такой же формат на выходе, как если бы мы отправляли обыкновенную форму с encoding установленным в "multipart/form-data".</p> + +<div class="note"> +<p><strong>Важно</strong>: О деталях использования FormData можно прочитать в статье <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Использование объекта FormData</a>.</p> +</div> + +<h2 id="Syntax" name="Syntax">Конструктор</h2> + +<dl> + <dt>{{domxref("FormData.FormData","FormData()")}}</dt> + <dd>Создаёт объект <code>FormData</code>.</dd> +</dl> + +<h2 id="Методы">Методы</h2> + +<dl> + <dt>{{domxref("FormData.append")}}</dt> + <dd>Добавляет новое значение существующего поля объекта <code style="font-style: normal;">FormData</code>, либо создаёт его и присваивает значение.</dd> + <dt>{{domxref("FormData.delete")}}</dt> + <dd>Удаляет пару ключ-значение из объекта <code>FormData</code>.</dd> + <dt>{{domxref("FormData.get")}}</dt> + <dd>Возвращает первое значение ассоциированное с переданным ключом из объекта <code>FormData</code>.</dd> + <dt>{{domxref("FormData.getAll")}}</dt> + <dd>Возвращает массив всех значений ассоциированных с переданным ключом из объекта <code style="font-style: normal;">FormData</code>.</dd> + <dt>{{domxref("FormData.has")}}</dt> + <dd>Возвращает булево значение касательно наличия в объекте <span style="font-family: consolas,monaco,andale mono,monospace;">FormData</span> конкретной пары ключ-значение.</dd> + <dt>{{domxref("FormData.set")}}</dt> + <dd>Устанавливает новое значение для существующего ключа объекта <span style="font-family: consolas,monaco,andale mono,monospace;">FormData</span>, или добавляет пару ключ-значение, если таковой не обнаружено в объекте.</dd> +</dl> + +<div class="note"> +<p><strong>Важно</strong>: Разница между {{domxref("FormData.set()")}} и {{domxref("FormData.append()")}} заключается в том, что если указанный ключ найден в объекте, {{domxref("FormData.set()")}} перезапишет его новым значением, тогда как {{domxref("FormData.append()")}} добавит новое значение в конец существующего. Смотрите дополнительные материалы с примерами. </p> +</div> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Примечание</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>FormData определен в XHR spec</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость">Совместимость</h2> + +<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на слияние.</div> + +<p>{{Compat("api.FormData")}}</p> + +<h2 id="Смотри_также">Смотри также</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Использование объектов FormData</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> 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 +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p><code><strong>FormData.keys()</strong></code> метод возвращает {{jsxref("Iteration_protocols",'iterator')}} позволяя пройтись по всем ключам содержащимся в этом объекте. Ключи являются {{domxref("USVString")}} объектами.</p> + +<div class="note"> +<p><strong>Примечание</strong>: Метод доступен в <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">formData.keys();</pre> + +<h3 class="highlight-spanned" id="Возвращаемые_значения"><span class="highlight-span">Возвращаемые значения</span></h3> + +<p>Возвращает {{jsxref("Iteration_protocols","iterator")}}.</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: js;highlight:[7]">// 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); +} +</pre> + +<p>Результат:</p> + +<pre>key1 +key2</pre> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#dom-formdata','keys() (as iterator<>)')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Начальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("api.FormData.keys")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Использование XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Использование объектов FormData</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> 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 +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p>Метод set() из интерфейса {{domxref("FormData")}} присваивает новое значение существующему ключу внутри объекта <code>FormData </code>, или добавляет ключ/значение если до этого они не были установлены.</p> + +<p>Разница между <code>set()</code> и {{domxref("FormData.append")}} в том, что если заданный ключ уже существует, <code>set()</code> заменит данные в нем на новые, а {{domxref("FormData.append")}} добавит новое значение к остальным в конец.</p> + +<div class="note"> +<p><strong>Примечание</strong>: Данный метод также доступен в <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<p>Существует две формы использования данной функции: с двумя и тремя параметрами:</p> + +<pre class="brush: js">formData.set(name, value); +formData.set(name, value, filename);</pre> + +<h4 id="append_Parameters" name="append()_Parameters">Параметры</h4> + +<dl> + <dt><code>name</code></dt> + <dd>Имя поля, которому будет присвоен value.</dd> + <dt><code>value</code></dt> + <dd>Значение, присваиваемое полю. В варианте с двумя параметрами, это <a class="new" href="https://developer.mozilla.org/ru/docs/Web/API/USVString" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>USVString</code></a>, если нет, то оно будет конвертировано. В варианте с тремя параметрами это может быть <a href="https://developer.mozilla.org/ru/docs/Web/API/Blob" title="Объект Blob представляет из себя объект наподобие файла с неизменяемыми, сырыми данными. Blob-ы представляют данные, которые могут быть не в родном формате JavaScript. Интерфейс File основан на Blob, наследует функциональность Blob и расширяет его для поддержки файлов на системе пользователя."><code>Blob</code></a>, <a href="https://developer.mozilla.org/ru/docs/Web/API/File" title="Интерфейс File представляет информацию о файлах и предоставляет JavaScript в веб странице доступ к их контенту."><code>File</code></a>, или <a class="new" href="https://developer.mozilla.org/ru/docs/Web/API/USVString" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>USVString</code></a>, И снова, если ни один из них не указан в значении то оно будет конвертировано в строку.</dd> + <dt><code>filename </code>{{optional_inline}}</dt> + <dd>Имя файла, которое будет отправлено серверу (<a class="new" href="https://developer.mozilla.org/ru/docs/Web/API/USVString" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>USVString</code></a>), когда <a href="https://developer.mozilla.org/ru/docs/Web/API/Blob" title="Объект Blob представляет из себя объект наподобие файла с неизменяемыми, сырыми данными. Blob-ы представляют данные, которые могут быть не в родном формате JavaScript. Интерфейс File основан на Blob, наследует функциональность Blob и расширяет его для поддержки файлов на системе пользователя."><code>Blob</code></a> или <a href="https://developer.mozilla.org/ru/docs/Web/API/File" title="Интерфейс File представляет информацию о файлах и предоставляет JavaScript в веб странице доступ к их контенту."><code>File</code></a> прошел проверку как второй параметр. Стандартное имя файла для <a href="https://developer.mozilla.org/ru/docs/Web/API/Blob" title="Объект Blob представляет из себя объект наподобие файла с неизменяемыми, сырыми данными. Blob-ы представляют данные, которые могут быть не в родном формате JavaScript. Интерфейс File основан на Blob, наследует функциональность Blob и расширяет его для поддержки файлов на системе пользователя."><code>Blob</code></a> объектов это "blob".</dd> +</dl> + +<div class="note"> +<p><strong>Примечание:</strong> Если вы укажете <a href="https://developer.mozilla.org/ru/docs/Web/API/Blob" title="Объект Blob представляет из себя объект наподобие файла с неизменяемыми, сырыми данными. Blob-ы представляют данные, которые могут быть не в родном формате JavaScript. Интерфейс File основан на Blob, наследует функциональность Blob и расширяет его для поддержки файлов на системе пользователя."><code>Blob</code></a> в качестве данных для включения в объект <code>FormData</code>, имя файла будет указано для сервера в заголовке "Content-Disposition" и может отличаться от браузера к браузеру.</p> +</div> + +<h2 id="Пример">Пример</h2> + +<p>Следующий код создает пустой <code>FormData</code> объект:</p> + +<pre class="brush: js">var formData = new FormData(); // Сейчас пустой</pre> + +<p>Вы можете установить для него пару ключ/значение, используя {{domxref("FormData.set")}}:</p> + +<pre class="brush: js">formData.set('username', 'Chris'); +formData.set('userpic', myFileInput.files[0], 'chris.jpg');</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#dom-formdata-set','set()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{Compat("api.FormData.set")}}</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> 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 +--- +<p class="summary">Объект <code><a href="/en-US/docs/Web/API/FormData">FormData</a></code> позволяет создать набор пар ключ/значение и передать их, используя <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>.</code> Объект <code><a href="/en-US/docs/Web/API/FormData">FormData</a></code> предназначен для передачи данных форм, однако может быть использован для передачи пар ключ/значение независимо от форм. Данные передаются в том же формате, как и данные, передаваемые методом <code>{{domxref("HTMLFormElement.submit","submit()")}}</code> формы, с установленной кодировкой <code>enctype="multipart/form-data"</code>.</p> + +<h2 id="Создание_объекта_FormData">Создание объекта FormData</h2> + +<p>Вы можете самостоятельно создать пустой объект <code>FormData</code>, наполнив его затем данными, используя его метод {<code>{domxref("FormData.append","append()")}}:</code></p> + +<pre class="brush: js">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); +</pre> + +<div class="note"><strong>Примечание:</strong> Поля "userfile" и "webmasterfile" оба содержат файлы. Число, переданное полю "accountnum" немедленно преобразуется в строку. Преобразование осуществляется методом <code><a href="/en/DOM/XMLHttpRequest/FormData#append()" title="en/XMLHttpRequest/FormData#append()">FormData.append()</a></code> (Значение поля может быть {{ domxref("Blob") }}, {{ domxref("File") }}, или строкой: <strong>если значение не является ни Blob, ни File, то оно автоматически преобразуется в строку).</strong></div> + +<p>Данный пример показывает создание экземпляра <code>FormData</code>, содержащего поля "username", "accountnum", "userfile" и "webmasterfile". Экземпляр <code>FormData</code> затем отправляется при помощи метода <code><a href="/en/DOM/XMLHttpRequest#send()" title="en/XMLHttpRequest#send()">send()</a></code> объекта <code>XMLHttpRequest</code>. Поле "webmasterfile" является экземпляром класса <code>{{domxref("Blob")}}</code>. Объект класса <code>Blob</code> является файло-подобным объектом, содержащим "сырые" данные. Определение данных как <code>Blob</code> не является обязательным в нативном javascript. Интерфейс<code> {{ domxref("File") }} </code>базируется на <code>Blob</code>, наследуя его функциональность и расширяя его для поддержки файлов в ОС пользователя. Для создания объектов класса <code>Blob</code> используйте <code>{{domxref("Blob.Blob","Blob() constructor")}}</code>.</p> + +<h2 id="Получение_объекта_FormData_из_HTML_формы">Получение объекта FormData из HTML формы</h2> + +<p>Для создания объекта <code>FormDatа</code>, содержащего данные существующей формы<code> ({{ HTMLElement("form") }}</code>) передайте форму в качестве аргумента при создании объекта <code>FormData:</code></p> + +<div class="note"> +<p><strong>Примечание: </strong>FormData будет использовать только те поля ввода, которые используют атрибут name.</p> +</div> + +<pre class="brush: js">var formData = new FormData(someFormElement); +</pre> + +<p>Например:</p> + +<pre class="brush: js">var formElement = document.querySelector("form"); +var request = new XMLHttpRequest(); +request.open("POST", "submitform.php"); +request.send(new FormData(formElement)); +</pre> + +<p>Вы так же можете добавить дополнительные данные в объект <code>FormData </code>после его создания и до отправки данных:</p> + +<pre class="brush: js">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);</pre> + +<p>Такой приём позволяет включать в форму дополнительную информацию, которая, например, не нуждается в демонстрации пользователю.</p> + +<h2 id="Отправка_файлов_при_помощи_объекта_FormData">Отправка файлов при помощи объекта FormData</h2> + +<p>Вы так же можете отправлять файлы при помощи <code>FormData. </code>Просто включите <code>{{ HTMLElement("input") }}</code> с типом <code>file </code>в форму.</p> + +<pre class="brush: html"><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> +</pre> + +<p>Затем вы сможете отправить выбранный файл следующим образом:</p> + +<pre class="brush: js">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); +</pre> + +<div class="note"> +<p><strong>Примечание</strong>: Если для формы указан атрибут <code>method</code>, то будет использован именно этот метод для отправки данных на сервер, а не метод, указанный в вызове <code>open()</code></p> +</div> + +<p>Вы так же можете добавить <code>{{ domxref("File") }}</code> или <code>{{ domxref("Blob") }}</code> непосредственно к объекту <code>{{ domxref("FormData") }}:</code></p> + +<pre class="brush: js">data.append("myfile", myBlob, "filename.txt"); +</pre> + +<p>Метод<code> {{domxref("FormData.append","append()")}} </code>принимает 3й опциональный параметр - название файла, которое добавляется в заголовок <code>Content-Disposition </code>при отправке на сервер. Если название файла не указано (или данный параметр не поддерживается) используется имя "blob".</p> + +<p>Вы так же можете использовать <code>FormData</code> с jQuery:</p> + +<pre class="brush: js">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 не передавать тип контента +}); +</pre> + +<h2 id="Отправка_форм_и_файлов_при_помощи_AJAX_без_использования_объекта_FormData">Отправка форм и файлов при помощи AJAX <em>без использования</em> объекта <code>FormData</code></h2> + +<p>Если вы заинтересованы в отправке форм и файлов при помощи <a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">AJAX</a> <em>без использования</em> FormData, прочитайте <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="данную статью">/ru/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files</a></p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> + <li>{{domxref("HTMLFormElement")}}</li> + <li>{{domxref("Blob")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a></li> +</ul> 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 +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p>The <code><strong>FormData.values()</strong></code> метод возвращает {{jsxref("Iteration_protocols",'iterator')}} позволяя пройтись по всем значениям в этом объекте. Значения - это {{domxref("USVString")}} или {{domxref("Blob")}} объекты.</p> + +<div class="note"> +<p><strong>Примечание</strong>: Метод доступен в <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">formData.values();</pre> + +<h3 id="Возвращаемые_значения">Возвращаемые значения</h3> + +<p>Возвращает {{jsxref("Iteration_protocols","iterator")}}.</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: js;highlight:[7]">// 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); +} +</pre> + +<p>Результат:</p> + +<pre>value1 +value2</pre> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#dom-formdata','values() (as iterator<>)')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Начальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("api.FormData.values")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Использование XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Использование FormData objects</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> |