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