Comment télécharger des fichiers avec JavaScript et suivre leur progression ?

Téléchargement de fichiers avec JavaScript

Pour télécharger un fichier sélectionné via un élément d'entrée, vous pouvez utiliser l'objet FormData. Voici comment procéder :

1. Créez un objet FormData :

let formData = new FormData();

2. Ajoutez le fichier au FormData :

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

3. Envoyer les données au serveur :

À l'aide de l'API fetch, vous pouvez envoyer les données du formulaire à l'URL spécifiée :

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

Écoute de la progression du téléchargement

Pour surveiller la progression du téléchargement, vous pouvez utiliser addEventListener() de EventTarget méthode :

let progressBar = document.getElementById("progress-bar");

formData.addEventListener("progress", (event) => {
    if (event.lengthComputable) {
        let percentComplete = Math.round((event.loaded / event.total) * 100);
        progressBar.style.width = percentComplete + "%";
    }
});

Exemple de code complet

Combinant le téléchargement de fichiers et le suivi de la progression en un seul exemple :

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

let progressBar = document.getElementById("progress-bar");

fetch('/upload/image', {method: "POST", body: formData})
.then((response) => {
    console.log(response);  // Handle server response
})
.catch((error) => {
    console.error(error);  // Handle upload failure
});

formData.addEventListener("progress", (event) => {
    if (event.lengthComputable) {
        let percentComplete = Math.round((event.loaded / event.total) * 100);
        progressBar.style.width = percentComplete + "%";
    }
});

Ce code créez une requête POST à ​​l'URL "/upload/image", envoyez les données du fichier et affichez la progression du téléchargement à l'aide d'une barre de progression.

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!