Envoi de fichiers en JavaScript

Supposons que vous ayez un élément HTML représentant un bouton permettant aux utilisateurs de sélectionner un fichier. En cliquant sur le bouton et en choisissant un fichier, son nom est stocké dans document.getElementById("image-file").value. Si le serveur prend en charge les requêtes POST en plusieurs parties à l'URL « /upload/image », comment envoyer le fichier à ce point de terminaison ? De plus, comment suivez-vous la progression du téléchargement ?

JavaScript pur avec Fetch

Vous pouvez utiliser l'API fetch avec la gestion facultative d'attente-essayer-catch :

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

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

Exemple avec Async-Try-Catch

Cet exemple inclut également les données utilisateur envoyées au format 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);
  }
}

Surveillance de la progression du téléchargement

Malheureusement, les méthodes telles que request.onprogress ne sont pas prises en charge dans le téléchargement de fichiers HTML5 avec fetch, mais vous pouvez surveiller la progression globale du téléchargement en écoutant les événements réseau :

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