Comment télécharger des fichiers avec JavaScript ?

Comment télécharger un fichier à l'aide de JavaScript

Pour télécharger un fichier à l'aide de JavaScript, vous pouvez tirer parti des étapes suivantes :

1. Utiliser les données du formulaire :

   • Créez un objet FormData pour stocker le fichier et les données supplémentaires.
   • Ajouter le fichier au formulaire données à l'aide de formData.append() .

2. Faire une requête XHR :

   • Créer un objet XMLHttpRequest (XHR) .
   • Définissez la méthode de requête sur "POST" et l'URL sur le point de terminaison de téléchargement.
   • Définissez la propriété body de l'objet XHR sur formData .

3. Écoutez les événements de téléchargement :

   • Ajoutez des écouteurs d'événements à l'objet XHR pour les événements de chargement, de progression et d'erreur.
   • Dans ces gestionnaires d'événements, vous pouvez gérer l'état de téléchargement et la réponse.

Exemple de code :

const formData = new FormData();
const fileInput = document.getElementById('image-file');
const file = fileInput.files[0];

formData.append('photo', file);

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload/image');
xhr.send(formData);

xhr.addEventListener('load', () => {
  // Handle successful upload
});

xhr.addEventListener('progress', (e) => {
  // Monitor upload progress
});

xhr.addEventListener('error', (e) => {
  // Handle upload errors
});

Pure JavaScript :

Si vous souhaitez utiliser du JavaScript pur sans XHR, vous pouvez utiliser l'API fetch avec FormData .

Exemple :

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!