18.1.3.5. Запросы с данными в формате multipart/form-data

Когда наряду с другими элементами HTML-формы включают элементы выгрузки файлов, броузер не может использовать обычный способ представления данных форм и должен отправлять формы, используя специальное значение «multipart/form-data» в заголовке «Content-Type». Этот формат связан с использованием длинных «граничных» строк, делящих тело запроса на несколько частей. Для текстовых данных можно вручную создать тело «multipart/form-data» запроса, но это довольно сложно.

Спецификация «ХНН2» определяет новый прикладной интерфейс FormData, упрощающий создание тела запроса, состоящего из нескольких частей. Сначала с помощью конструктора FormData() создается объект FormData, а затем вызовом метода append() этого объекта в него добавляются отдельные «части» (которые могут быть строками или объектами File и Blob). В заключение объект FormData передается методу send(). Метод send() определит соответствующую строку, обозначающую границу, и установит заголовок «Content-Type» запроса. Пример 18.10 демонстрирует использование объекта FormData, с которым мы еще встретимся в примере 18.11.

Пример 18.10. Отправка запроса с данными в формате multipart/form-data

function postFormData(url, data, callback) {

  if (typeof FormData === "undefined")

    throw new Error("Объект FormData не реализован");

  var request = new XMLHttpRequest(); // Новый HTTP-запрос

  request.open("POST", url); // Методом POST на указанный URL

  request.onreadystatechange = function() { // Простой обработчик,

    if (request.readyState === 4 && callback) // При получении ответа

      callback(request); // вызвать указанную функц.

  };

  var formdata = new FormData();

  for(var name in data) {

    if (!data.hasOwnProperty(name)) continue; // Пропустить унасл. св-ва

    var value = data[name];

    if (typeof value === "function”) continue; // Пропустить методы

    // Каждое свойство станет отдельной "частью" тела запроса.

    // Допускается использовать объекты File

    formdata.append(name, value); // Добавить имя/значение,

  } // как одну часть

  // Отправить пары имя/значение в теле запроса multipart/form-data. Каждая пара -

  // это одна часть тела запроса. Обратите внимание, что метод send автоматически

  // устанавливает заголовок Content-Type, когда ему передается объект FormData

  request.send(formdata);

}