Maison > Article > interface Web > Comment implémenter la fonction de téléchargement de fichiers avec barre de progression en JavaScript ?

Comment implémenter la fonction de téléchargement de fichiers avec barre de progression en JavaScript ?

WBOYoriginal: 2023-10-21 10:07:47638parcourir

JavaScript 如何实现带进度条的文件上传功能？

Comment implémenter la fonction de téléchargement de fichiers avec barre de progression en JavaScript ?

Dans le développement Web moderne, le téléchargement de fichiers est une opération courante. Afin d'améliorer l'expérience utilisateur, il est nécessaire d'ajouter une fonction de téléchargement de fichiers avec une barre de progression. Cet article explique comment utiliser JavaScript pour implémenter la fonction de téléchargement de fichiers avec une barre de progression et donne des exemples de code spécifiques.

1. Mise en page de la page frontale

Tout d'abord, nous devons créer une mise en page qui comprend des boutons de sélection de fichiers, des barres de progression et des boutons de téléchargement sur la page frontale.

<!DOCTYPE html>
<html>
<head>
    <title>带进度条的文件上传</title>
</head>
<body>
    <h1>带进度条的文件上传</h1>
    <input type="file" id="fileInput">
    <progress id="progressBar" value="0" max="100"></progress>
    <button onclick="uploadFile()">上传</button>
</body>
</html>

Dans le code ci-dessus, nous utilisons l'élément 3525558f8f338d4ea90ebf22e5cde2bc pour créer un bouton de sélection de fichier, l'élément 6ecb87e5318a36c03c59e25d55f43372

2. JavaScript implémente la fonction de téléchargement

Ensuite, nous utilisons JavaScript pour implémenter la fonction de téléchargement de fichiers et mettre à jour la barre de progression en temps réel pendant le processus de téléchargement.

function uploadFile() {
    var fileInput = document.getElementById("fileInput");
    var file = fileInput.files[0];
    
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/upload", true);

    xhr.upload.addEventListener("progress", function(e) {
        if (e.lengthComputable) {
            var percentComplete = Math.round((e.loaded / e.total) * 100);
            var progressBar = document.getElementById("progressBar");
            progressBar.value = percentComplete;
        }
    }, false);

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log("上传完成");
        }
    };

    xhr.send(file);
}

Dans le code ci-dessus, nous récupérons d'abord l'élément du bouton de sélection de fichier et obtenons le fichier sélectionné. Nous créons ensuite un objet XMLHttpRequest et spécifions l'URL de la requête POST. Ici, vous devez le remplacer par votre propre adresse d'interface backend en fonction de la situation réelle.

Ensuite, nous écoutons l'événement de progression pendant le processus de téléchargement, calculons le pourcentage de téléchargement et mettons à jour la valeur de la barre de progression à chaque fois que la progression est mise à jour.

Lorsque l'état prêt de la demande passe à 4 (la demande est terminée) et que le statut est 200 (la demande est réussie), nous pouvons déterminer que le téléchargement du fichier est terminé.

3. Traitement back-end du téléchargement de fichiers

Le code ci-dessus gère uniquement la logique de téléchargement de fichiers sur le front-end, et le traitement correspondant doit être effectué sur le back-end. Ici, nous prenons Node.js comme exemple, utilisant le framework Express pour gérer les demandes de téléchargement de fichiers et enregistrer les fichiers sur le serveur.

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), function (req, res, next) {
    // 文件上传成功后的处理逻辑
    console.log(req.file);
});

Dans ce code, nous présentons d'abord les modules Express et multer, et utilisons le middleware multer pour gérer les demandes de téléchargement de fichiers. multer configure le répertoire cible pour le téléchargement de fichiers sur "uploads/" et utilise upload.single('file') pour recevoir un fichier nommé "file".

Une fois le fichier téléchargé avec succès, vous pouvez imprimer l'objet req.file sur la console. Cet objet contient des informations pertinentes sur le fichier téléchargé, telles que le nom du fichier, la taille du fichier, etc.

4. Résumé

Grâce à l'exemple de code ci-dessus, nous avons implémenté avec succès une fonction de téléchargement de fichiers avec une barre de progression. Dans la partie front-end, JavaScript est utilisé pour surveiller l'événement de progression pendant le processus de téléchargement et mettre à jour la valeur de la barre de progression en temps réel. Dans la partie backend, les demandes de téléchargement de fichiers sont traitées via le framework Express et le middleware multer, et les fichiers sont enregistrés sur le serveur.

Si vous devez l'utiliser dans des projets réels, veuillez modifier le code en fonction de la situation réelle. J'espère que cet article pourra vous aider à mettre en œuvre une fonction de téléchargement de fichiers rapide et pratique.

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!

JavaScript 中间件 express 接口 JS 对象事件 input

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser JavaScript pour obtenir l'effet de fond dégradé de la barre de navigation fixe en bas de la page Web ?Article suivant：Comment utiliser JavaScript pour obtenir l'effet de fond dégradé de la barre de navigation fixe en bas de la page Web ?

Articles Liés

Voir plus