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

<b>// выбранный файл по указанному URL-адресу &quot;uploadto&quot;. Ответ сервера игнорируется. </b>

whenReady(function() { // Вызвать эту функцию после загрузки документа

 var elts = document.getElementsByTagName("input”); // Все элементы input

 for(var і = 0; і < elts.length; i++) { // Обойти в цикле

 var input = elts[i];

 if (input.type !== ’'file") continue; // Пропустить все, кроме

<b>                                          // элементов выгрузки файлов</b>

 var url = input.getAttribute("data-uploadto"); // Адрес выгрузки

 if (!url) continue; // Пропустить элементы без url

 input.addEventListener("change", function() { // При выборе файла

<b>      var file = this.files[0]; // Предполагается выбор единственного файла</b>

 if (!file) return; // Если файл не выбран, ничего не делать

 var xhr = new XMLHttpRequest(); // Создать новый запрос

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

 xhr.send(file); // Отправить файл в теле запроса

 }, false);

 }

});

Как будет показано в разделе 22.6, тип

File

является подтипом более общего типа

Blob

. Спецификация «ХНН2» позволяет передавать методу

send()

произвольные объекты

Blob

. Свойство

type

объекта

Blob

в этом случае будет использоваться для установки заголовка «Content-Type», если он не будет определен явно. Если потребуется выгрузить двоичные данные, сгенерированные клиентским сценарием, можно воспользоваться приемами преобразования данных в объект

Blob

, демонстрируемыми в разделах 22.5 и 22.6.3, и передавать в виде тела запроса этот объект.

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; // Пропустить методы

<b>    // Каждое свойство станет отдельной &quot;частью&quot; тела запроса.</b>

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

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

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

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

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

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

 request.send(formdata);

}

18.1.4. События, возникающие в ходе выполнения НТТР-запроса

В примерах выше для определения момента завершения HTTP-запроса использовалось событие «readystatechange». Проект спецификации «ХНН2» определяет более удобный набор событий, уже реализованный в Firefox, Chrome и Safari. В этой новой модели событий объект

XMLHttpRequest

генерирует различные типы событий на разных этапах выполнения запроса, благодаря чему отпадает необходимость проверять значение свойства

readyState