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

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

vicenta_kertzmann

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

18 | 0

programming

1 ответ

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

nicola

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

@vicenta_kertzmann

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

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

Пример:

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();

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

Пример:

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);

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

0 | 0

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

1 ответ

Похожие обсуждения: