Класс FormData

В опции body функции fetch() и объекта Request можно указать данные в виде объекта FormData. При этом автоматически добавляется заголовок Content-Type со значением multipart/form-data, который позволяет также отправить файл на сервер. Формат конструктора:

<Объект> = new FormData([<Ссылка на форму>])

Если в качестве параметра указать ссылку на форму, то будут автоматически получены данные всех элементов формы, включая значения полей для выбора файла. Элементы формы должны иметь параметр name. Пример получения всех данных формы с идентификатором frm1:

let formData = new FormData( document.getElementById('frm1') );

Если параметр не указан, то создается пустой объект:

let formData = new FormData();
formData.append('txt1', '1');
formData.append('txt2', '2');
console.log( formData.get('txt1') ); // 1
console.log( formData.get('txt2') ); // 2

Класс FormData содержит следующие методы:

  • get(<Ключ>) — возвращает значение параметра с указанным именем. Если параметров с указанным именем несколько, то вернет только первое значение. Если параметр не найден, то возвращается значение null:
let formData = new FormData();
formData.append('x', '1');
formData.append('x', '2');
console.log( formData.get('x') ); // 1
console.log( formData.get('y') ); // null
  • getAll(<Ключ>) — возвращает все значения параметра с указанным именем в виде массива. Если параметр не найден, то возвращается пустой массив:
let formData = new FormData();
formData.append('x', '1');
formData.append('x', '2');
console.log( formData.getAll('x') ); // Array [ "1", "2" ]
console.log( formData.getAll('y') ); // Array [  ]
  • keys() — возвращает итератор, позволяющий перебрать все названия параметров:
let formData = new FormData();
formData.append('x', '5');
formData.append('y', '3');
for ( let key of formData.keys() ) {
   console.log( key + ' => ' + formData.get(key) );
}
// x => 5
// y => 3
  • values() — возвращает итератор, позволяющий перебрать все значения параметров:
let formData = new FormData();
formData.append('x', '5');
formData.append('y', '3');
for ( let value of formData.values() ) {
   console.log( value );
}
// 5
// 3
  • entries() — возвращает итератор, позволяющий перебрать все названия и значения параметров:
let formData = new FormData();
formData.append('x', '5');
formData.append('y', '3');
for ( let pair of formData.entries() ) {
   console.log( pair[0] + ' => ' + pair[1] );
}
// x => 5
// y => 3

При использовании цикла for...of мы можем опустить вызов метода entries():

for ( let pair of formData ) {
   console.log( pair );
   console.log( pair[0] + ' => ' + pair[1] );
}
// Array [ "x", "5" ]
// x => 5
// Array [ "y", "3" ]
// y => 3
for ( let [key, value] of formData ) {
   console.log( key + ' => ' + value );
}
  • forEach(<Функция>) — вызывает функцию для каждого параметра. Через первый параметр доступно значение, а через второй — название:
let formData = new FormData();
formData.append('x', '5');
formData.append('y', '3');
formData.forEach( function(value, key) {
   console.log( key + ' => ' + value );
});
// x => 5
// y => 3
  • has(<Ключ>) — возвращает значение true, если параметр с указанным именем существует, и false — в противном случае:
let formData = new FormData();
formData.append('x', '5');
console.log( formData.has('x') );  // true
console.log( formData.has('y') );  // false
  • set(<Ключ>, <Значение>[, <Имя файла>]) — задает новое значение для указанного параметра. Если параметр существует, то его значение будет заменено. Если параметр отсутствует, то он будет добавлен:
let formData = new FormData();
formData.set('x', '5');
formData.set('x', '12');
console.log( formData.getAll('x') );  // Array [ "12" ]

Во втором параметре можно указать файл в виде объектов Blob или File. В третьем параметре задается название файла, которое будет отправлено на сервер:

<input type="file" id="file1" name="file1" required>
<button type="button" class="btn btn-primary"
        id="btn1">Нажми меня</button>
$('#btn1').click( function() {
  let file1 = document.getElementById('file1');
  if (file1.files.length === 0) return;
  let formData = new FormData();
  formData.set('file1', file1.files[0], 'myfile.jpg');
  console.log( formData.get('file1') );
  // File { name: "myfile.jpg", lastModified: 1583796134578,
  // lastModifiedDate: Date 2020-03-09T23:22:14.578Z, 
  // webkitRelativePath: "", size: 24623, type: "image/jpeg" }
});
  • append(<Ключ>, <Значение>[, <Имя файла>]) — добавляет параметр с указанным значением, не изменяя значение одноименного существующего параметра. Если параметр отсутствует, то он будет добавлен:
let formData = new FormData();
formData.append('x', '5');
formData.append('x', '12');
console.log( formData.getAll('x') );  // Array [ "5", "12" ]

Во втором параметре можно указать файл в виде объектов Blob или File. В третьем параметре задается название файла, которое будет отправлено на сервер:

<input type="file" id="file1" name="file1" required>
<button type="button" class="btn btn-primary"
        id="btn1">Нажми меня</button>
$('#btn1').click( function() {
  let file1 = document.getElementById('file1');
  if (file1.files.length === 0) return;
  let formData = new FormData();
  formData.append('file1', file1.files[0], 'myfile.jpg');
  console.log( formData.get('file1') );
  // File { name: "myfile.jpg", lastModified: 1583796134578,
  // lastModifiedDate: Date 2020-03-09T23:22:14.578Z, 
  // webkitRelativePath: "", size: 24623, type: "image/jpeg" }
});
  • delete(<Ключ>) — удаляет все параметры с указанным именем:
let formData = new FormData();
formData.append('x', '5');
formData.append('x', '12');
formData.delete('x');
console.log( formData.getAll('x') );  // Array [  ]

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов