Отправка файлов с помощью JavaScript

Предположим, у вас есть элемент HTML , представляющий кнопку, позволяющую пользователям выбирать файл. При нажатии кнопки и выборе файла его имя сохраняется в document.getElementById("image-file").value. Если сервер поддерживает многочастные запросы POST по URL-адресу «/upload/image», как отправить файл в эту конечную точку? Кроме того, как вы контролируете ход загрузки?

Чистый JavaScript с Fetch

Вы можете использовать API-интерфейс fetch с дополнительной обработкой await-try-catch:

let photo = document.getElementById("image-file").files[0];
let formData = new FormData();

formData.append("photo", photo);
fetch('/upload/image', {method: "POST", body: formData});

Пример с Async-Try-Catch

Этот пример также включает пользовательские данные, отправленные в формате JSON :

async function SavePhoto(inp) {
  let user = { name: 'john', age: 34 };
  let formData = new FormData();
  let photo = inp.files[0];

  formData.append("photo", photo);
  formData.append("user", JSON.stringify(user));

  const ctrl = new AbortController(); // for timeout
  setTimeout(() => ctrl.abort(), 5000);

  try {
    let r = await fetch('/upload/image', {
      method: "POST",
      body: formData,
      signal: ctrl.signal,
    });
    console.log('HTTP response code:', r.status);
  } catch (e) {
    console.log('Huston we have problem...:', e);
  }
}

Отслеживание хода загрузки

К сожалению, такие методы, как request.onprogress, не поддерживаются при загрузке файлов HTML5 с помощью выборки, но вы можете отслеживать общий прогресс загрузки, прослушивая сетевые события:

let xhr = new XMLHttpRequest();

xhr.upload.addEventListener('progress', function(e) {
  if (e.lengthComputable) {
    let percentComplete = (e.loaded / e.total) * 100;
    console.log('Upload progress:', percentComplete   '%');
  }
});

xhr.open('POST', '/upload/image');
xhr.send(formData);