Как передать файл при помощи xmlhttprequest?

Пользователь

от steve , в категории: JavaScript , 7 месяцев назад

Как передать файл при помощи xmlhttprequest?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от caterina , 7 месяцев назад

@steve 

Для передачи файла при помощи XMLHttpRequest (XHR) нужно использовать объект FormData. FormData позволяет собирать данные формы, включая файлы, и отправлять их на сервер с помощью XHR.


Пример кода:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
// выбираем файл
var fileInput = document.querySelector('input[type="file"]');
var file = fileInput.files[0];

// создаем объект FormData
var formData = new FormData();

// добавляем файл к объекту FormData
formData.append('file', file);

// создаем объект XHR
var xhr = new XMLHttpRequest();

// настраиваем запрос
xhr.open('POST', '/upload', true);

// отправляем запрос
xhr.send(formData);


В приведенном выше примере мы выбираем файл с помощью элемента input типа file, затем создаем объект FormData и добавляем выбранный файл к нему с помощью метода append(). Далее мы создаем объект XMLHttpRequest и отправляем наш объект FormData на сервер с помощью метода send().


На сервере вы можете получить файл с помощью стандартного метода для получения файлов из формы, например, в PHP это может выглядеть так:

1
$file = $_FILES['file'];


Обратите внимание, что этот пример отправляет запрос на URL "/upload". Вам нужно заменить это на URL вашего сервера и обработчика для загрузки файлов.