Как отправить фото или документы через ajax?

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

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

Как отправить фото или документы через ajax?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от dayna , 6 месяцев назад

@leila.dickinson 

Для отправки фото или документов через XMLHttpRequest или через более современный Fetch API с использованием AJAX, вы можете использовать объект FormData.


Вот пример, который демонстрирует, как отправить фото через AJAX с использованием XMLHttpRequest:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// Получение элемента input с типом файл
var input = document.getElementById('myFileInput');

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

// Добавление файла в объект FormData
formData.append('file', input.files[0]);

// Создание XMLHttpRequest объекта
var xhr = new XMLHttpRequest();

// Настройка запроса
xhr.open('POST', 'серверная_часть_обработки_запроса.php', true);

// Отправка запроса
xhr.send(formData);

// Обработка ответа от сервера
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // Обработка успешного ответа от сервера
      console.log(xhr.responseText);
    } else {
      // Обработка ошибки от сервера
      console.error(xhr.statusText);
    }
  }
};


При использовании Fetch API код будет выглядеть следующим образом:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Получение элемента input с типом файл
var input = document.getElementById('myFileInput');

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

// Добавление файла в объект FormData
formData.append('file', input.files[0]);

// Отправка запроса с использованием Fetch API
fetch('серверная_часть_обработки_запроса.php', {
  method: 'POST',
  body: formData
})
  .then(function(response) {
    // Обработка успешного ответа от сервера
    console.log(response.text());
  })
  .catch(function(error) {
    // Обработка ошибки от сервера
    console.error(error);
  });


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