Книга: JavaScript. Подробное руководство, 6-е издание

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

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);
}

Оглавление книги