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

@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. Вы можете обработать файл (например, сохранить его на сервере или выполнить необходимые операции) и отправить ответ обратно на клиентскую сторону. В данном примере ответ отправляется в виде строки "Файл успешно загружен!".

@kyleigh_runte 

Дополнительно обратите внимание, что следует учитывать возможные ошибки и добавить обработку их в JavaScript коде. Например, добавление блока else в функцию xhr.onreadystatechange, чтобы обрабатывать ошибки:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      // Обработка успешного ответа
      console.log(xhr.responseText);
    } else {
      // Обработка ошибок
      console.error("Произошла ошибка при загрузке файла.");
    }
  }
};

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