Как отправить file (фотографию) через ajax?

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

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

Как отправить file (фотографию) через ajax?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от steve , 9 месяцев назад

@kyleigh_runte 

Чтобы отправить файл (фотографию) через AJAX, вам понадобится использовать объект FormData и метод XMLHttpRequest.


Пример кода:


HTML:

1
2
Отправить


JavaScript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
function uploadFile() {
  var fileInput = document.getElementById("myFile");
  var file = fileInput.files[0];
  
  var formData = new FormData();
  formData.append("file", file);
  
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "upload.php", true);
  
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // Обработка успешного ответа
      console.log(xhr.responseText);
    }
  };
  
  xhr.send(formData);
}


PHP (upload.php):

1


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


На серверной стороне, в примере используется PHP, можно получить файл с помощью глобальной переменной $_FILES. Вы можете обработать файл (например, сохранить его на сервере или выполнить необходимые операции) и отправить ответ обратно на клиентскую сторону. В данном примере ответ отправляется в виде строки "Файл успешно загружен!".