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

18.1.3.4. Выгрузка файлов

18.1.3.4. Выгрузка файлов

Одна из особенностей HTML-форм заключается в том, что, если пользователь выберет файл с помощью элемента <input type="file">, форма отправит содержимое этого файла в теле POST-запроса. HTML-формы всегда позволяли выгружать файлы, но до недавнего времени эта операция была недоступна в прикладном интерфейсе XMLHttpRequest. Прикладной интерфейс, определяемый спецификацией «ХНН2», позволяет выгружать файлы за счет передачи объекта File методу send().

В данном случае нельзя создать объект с помощью конструктора File(): сценарий может лишь получить объект File, представляющий файл, выбранный пользователем. В броузерах, поддерживающих объекты File, каждый элемент <input type="file"> имеет свойство files, которое ссылается на объект, подобный массиву, хранящий объекты File. Прикладной интерфейс буксировки (drag-and-drop) (раздел 17.7) также позволяет получить доступ к файлам, «сбрасываемым» пользователем на элемент, через свойство dataTransfer.files события «drop». Поближе с объектом File мы познакомимся в разделах 22.6 и 22.7. А пока будем рассматривать объект File как полностью непрозрачное представление выбранного пользователем файла, пригодное для выгрузки методом send(). В примере 18.9 представлена ненавязчивая JavaScript-функция, добавляющая обработчик события «change» к указанным элементам выгрузки файлов, чтобы они автоматически отправляли содержимое любого выбранного файла методом POST на указанный адрес URL.

Пример 18.9. Выгрузка файла посредством запроса HTTP POST

// Отыскивает все элементы <input type=”file"> с атрибутом data-uploadto
// и регистрирует обработчик onchange, который автоматически отправляет
// выбранный файл по указанному URL-адресу "uploadto". Ответ сервера игнорируется.
whenReady(function() { // Вызвать эту функцию после загрузки документа
  var elts = document.getElementsByTagName("input”); // Все элементы input
  for(var і = 0; і < elts.length; i++) { // Обойти в цикле
    var input = elts[i];
    if (input.type !== ’'file") continue; // Пропустить все, кроме
                                          // элементов выгрузки файлов
    var url = input.getAttribute("data-uploadto"); // Адрес выгрузки
    if (!url) continue; // Пропустить элементы без url
    input.addEventListener("change", function() { // При выборе файла
      var file = this.files[0]; // Предполагается выбор единственного файла
      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, и передавать в виде тела запроса этот объект.

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