Comment transmettre des fichiers à un serveur à l'aide de JavaScript ?

Téléchargement de fichiers avec JavaScript

Lorsqu'une page Web permet aux utilisateurs de sélectionner des fichiers à l'aide d'un élément d'entrée de fichier, le nom du fichier sélectionné peut être récupéré à partir de document.getElementById("fichier-image").value. Mais comment transmettre ce fichier à un serveur ?

Pour les uploads de fichiers, JavaScript propose plusieurs approches. Une option consiste à utiliser l'API Fetch :

Pure JS (Fetch)

let photo = document.getElementById("image-file").files[0];
let formData = new FormData();
     
formData.append("photo", photo);
fetch('/upload/image', {method: "POST", body: formData});

Cette approche crée un objet formData, y ajoute le fichier sélectionné et utilise Récupérez pour envoyer le formData à l'URL spécifiée.

Notification d'état de téléchargement de fichier

Pour écouter la fin du téléchargement de fichier, vous pouvez utiliser l'objet XMLHttpRequest pour créer un objet FormData. et définissez son écouteur d'événement onreadystatechange. Une fois le téléchargement du fichier terminé, la propriété readyState de l'événement sera 4.

// Register file input
const fileInput = document.getElementById('image-file');

// Add event listener for onreadystatechange
fileInput.addEventListener('change', (e) => {
  const files = e.target.files;
  
  if (files.length > 0) {
    // Create a FormData object
    const formData = new FormData();
    
    // Append selected files to FormData object
    for (const file of files) {
      formData.append('files', file);
    }

    // Create an XMLHttpRequest object
    const xhr = new XMLHttpRequest();

    // Open a POST request to the server
    xhr.open('POST', '/upload/image');

    // Set the onreadystatechange event listener
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          // File upload completed successfully
          console.log('File uploaded successfully!');
        } else {
          // File upload failed
          console.error('File upload failed!');
        }
      }
    };

    // Send the FormData object
    xhr.send(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!