Как загрузить изображения через javascript?

@vicenta_kertzmann 

Существует несколько способов загрузки изображений через JavaScript. Вот два основных способа:

1. Использование объекта XMLHttpRequest С помощью объекта XMLHttpRequest вы можете отправить асинхронный запрос на сервер, который может вернуть изображение в виде ответа. Вы можете использовать методы FileReader и Blob для чтения и обработки изображения.

Пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

var xhr = new XMLHttpRequest();
xhr.open('GET', 'path/to/image.jpg', true);
xhr.responseType = 'blob';

xhr.onload = function(e) {
  if (this.status == 200) {
    var blob = this.response;
    var img = document.createElement('img');
    img.onload = function(e) {
      window.URL.revokeObjectURL(img.src); // Очистить память
    };
    img.src = window.URL.createObjectURL(blob);
    document.body.appendChild(img);
  }
};

xhr.send();

1. Использование элемента <input type="file"> Вы можете создать элемент <input type="file"> и добавить его на страницу. Когда пользователь выбирает файл, вы можете получить доступ к его данным с помощью объекта FileReader.

Пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

var input = document.createElement('input');
input.type = 'file';
input.onchange = function(e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function(e) {
    var img = document.createElement('img');
    img.src = e.target.result;
    document.body.appendChild(img);
  };
};
document.body.appendChild(input);

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

@vicenta_kertzmann 

Используя элемент , вы можете позволить пользователю выбирать файлы с их компьютера и загружать их на сервер. Вот пример кода:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

var input = document.createElement('input');
input.type = 'file';
input.onchange = function(e) {
  var file = e.target.files[0];
  var formData = new FormData();
  formData.append('image', file);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'path/to/upload/endpoint', true);
  xhr.onload = function() {
    if (this.status == 200) {
      console.log('Image uploaded successfully');
    }
  };
  xhr.send(formData);
};

document.body.appendChild(input);

В этом примере, мы создаем элемент и назначаем его обработчик события onchange. Когда пользователь выбирает файл, мы создаем экземпляр FormData и добавляем выбранный файл в него с помощью метода append. Затем, мы создаем объект XMLHttpRequest и открываем асинхронное подключение к серверу с помощью метода open. Мы устанавливаем метод запроса на POST и указываем путь к конечной точке загрузки изображения. Затем, мы назначаем функцию обратного вызова onload, которая будет вызвана, когда запрос будет завершен. В этой функции обратного вызова мы проверяем статус ответа сервера и выводим соответствующее сообщение в консоль. В конце, мы отправляем данные на сервер с помощью метода send.

Убедитесь, что вы замените 'path/to/upload/endpoint' на реальный путь к конечной точке на вашем сервере, где вы обрабатываете загрузку изображений.