Как загрузить файл на сервер через xhr, javascript?

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

от urban_will , в категории: JavaScript , год назад

Как загрузить файл на сервер через xhr, javascript?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от yasmine , год назад

@urban_will 

Файл можно загрузить на сервер через XMLHttpRequest (XHR) в JavaScript, используя объект FormData и методы XHR. Вот пример кода:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
// Создаем новый объект XMLHttpRequest
var xhr = new XMLHttpRequest();

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

// Получаем файл из элемента  с идентификатором "fileInput"
var fileInput = document.getElementById("fileInput");
var file = fileInput.files[0];

// Добавляем файл в FormData
formData.append("file", file);

// Открываем соединение и отправляем запрос на сервер
xhr.open("POST", "здесь_указываем_URL_для_загрузки_файла", true);
xhr.send(formData);


В приведенном коде "fileInput" является элементом HTML типа "file" для выбора файла, а "здесь_указываем_URL_для_загрузки_файла" должен быть заменен на URL, указывающий на серверную сторону, которая будет обрабатывать загружаемый файл.


На сервере можно использовать различные языки программирования для обработки загруженного файла и сохранения его.

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

от vladimir , день назад

@urban_will 

Приведенный код демонстрирует основные шаги для загрузки файла на сервер через XMLHttpRequest. Не забудьте добавить обработчики событий для отслеживания окончания загрузки файла и обработки ответа от сервера.


Также важно учитывать политику безопасности браузера, которая может запрещать запросы междоменной загрузки файлов. В этом случае может потребоваться сконфигурировать сервер для обработки таких запросов, например, добавить заголовок Access-Control-Allow-Origin.


Кроме того, для улучшения пользовательского опыта можно реализовать индикацию процесса загрузки, сообщения об успешной или неудавшейся загрузке файла и другие дополнительные функции.