Maison > Article > développement back-end > Comment télécharger des fichiers avec Vanilla JavaScript et ajouter une animation de chargement

Comment télécharger des fichiers avec Vanilla JavaScript et ajouter une animation de chargement

PHPzoriginal: 2024-08-05 19:00:511119parcourir

How to Upload Files With Vanilla JavaScript and Add a Loading Animation

Le téléchargement de fichiers est très omniprésent dans toute application Web et lorsqu'il s'agit de télécharger des fichiers et des ressources sur Internet (sur un navigateur), les choses peuvent être quelque peu stressantes. Heureusement, avec HTML 5, les éléments de saisie qui sont généralement accompagnés d'un contrôle de formulaire pour permettre aux utilisateurs de modifier les données peuvent devenir très utiles pour simplifier le téléchargement de ressources.

Dans cet article, nous examinerons de plus près comment gérer les téléchargements de fichiers à l'aide de JavaScript Vanilla. L'objectif est de vous apprendre à créer un composant de téléchargement de fichiers sans avoir besoin d'une bibliothèque externe et également d'apprendre quelques concepts de base en JavaScript. Vous apprendrez également comment afficher l'état d'avancement d'un téléchargement au fur et à mesure.

Code source : comme d'habitude, vous pouvez bricoler le code source hébergé sur le dépôt GitHub pour le projet.

Configuration du projet

Tout d'abord, dans votre répertoire préféré, créez un nouveau dossier pour le projet :

$ mkdir file-upload-progress-bar-javascript

Après cela, créons maintenant les fichiers index.html, main.css et app.js dans lesquels nous écrirons tout le balisage de notre projet.

$ touch index.html && touch main.css && touch app.js

Nous pouvons maintenant commencer à construire la structure du téléchargement de fichiers en créant un modèle HTML de base avec et Mots-clés :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>File Upload with Progress Bar using JavaScript</title>
  </head>
  <body></body>
</html>

Ensuite, nous ajoutons des styles de base pour le projet dans main.css :

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Pour améliorer l'apparence de nos applications, nous utiliserons les icônes de la bibliothèque Font Awesome que nous pourrons ajouter à notre projet via un code de kit qui peut être créé sur le site Web officiel de la bibliothèque Font Awesome.

Maintenant, index.html est mis à jour et le fichier main.css est lié :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      src="https://kit.fontawesome.com/355573397a.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="main.css">
    <title>File Upload with Progress Bar using JavaScript</title>
  </head>
  <body></body>
</html>

Nous continuons en construisant la structure du téléchargeur de fichiers :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      src="https://kit.fontawesome.com/355573397a.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="main.css" />
    <title>File Upload with Progress Bar using JavaScript</title>
  </head>
  <body>
    <div class="file-upload__wrapper">
      <header>File Uploader JavaScript with Progress</header>
      <div class="form-parent">
        <form action="#" class="file-upload__form">
            <input class="file-input" type="file" name="file" hidden />
            <i class="fas fa-cloud-upload-alt"></i>
            <p>Browse File to Upload</p>
          </form>
          <div>
            <section class="progress-container"></section>
            <section class="uploaded-container"></section>
          </div>
      </div>
    </div>
    <script src="app.js"></script>
  </body>
</html>

Ensuite, copiez/collez les codes suivants pour mettre à jour main.css :

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  background: #cb67e9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, Helvetica, sans-serif;
}
::selection {
  color: white;
  background: #cb67e9;
}
.file-upload__wrapper {
  width: 640px;
  background: #fff;
  border-radius: 5px;
  padding: 35px;
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.05);
}
.file-upload__wrapper header {
  color: #cb67e9;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 20px;
}
.form-parent {
  display: flex;
  align-items: center;
  gap: 30px;
  justify-content: center;
}
.file-upload__wrapper form.file-upload__form {
  height: 150px;
  border: 2px dashed #cb67e9;
  cursor: pointer;
  margin: 30px 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-radius: 6px;
  padding: 10px;
}
form.file-upload__form :where(i, p) {
  color: #cb67e9;
}
form.file-upload__form i {
  font-size: 50px;
}
form.file-upload__form p {
  font-size: 1rem;
  margin-top: 15px;
}
section .row {
  background: #e9f0ff;
  margin-bottom: 10px;
  list-style: none;
  padding: 15px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 6px;
}
section .row i {
  font-size: 2rem;
  color: #cb67e9;
}
section .details span {
  font-size: 1rem;
}
.progress-container .row .content-wrapper {
  margin-left: 15px;
  width: 100%;
}
.progress-container .details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}
.progress-container .content .progress-bar-wrapper {
  height: 10px;
  width: 100%;
  margin-bottom: 5px;
  background: #fff;
  border-radius: 30px;
}
.content .progress-bar .progress-wrapper {
  height: 100%;
  background: #cb67e9;
  width: 0%;
  border-radius: 6px;
}
.uploaded-container {
  overflow-y: scroll;
  max-height: 230px;
}
.uploaded-container.onprogress {
  max-height: 160px;
}
.uploaded-container .row .content-wrapper {
  display: flex;
  align-items: center;
}
.uploaded-container .row .details-wrapper {
  display: flex;
  flex-direction: column;
  margin-left: 15px;
}
.uploaded-container .row .details-wrapper .name span {
  color: green;
  font-size: 10px;
}
.uploaded-container .row .details-wrapper .file-size {
  color: #404040;
  font-size: 11px;
}

Maintenant, le composant devrait être plus visible sur le navigateur :

Ajout d'une fonctionnalité de téléchargement

Pour ajouter les fonctionnalités requises pour le téléchargement dans notre projet, nous utilisons désormais le fichier app.js, où nous écrivons les codes JavaScript qui donnent vie à notre projet.

Copiez/collez ce qui suit dans app.js :

const uploadForm = document.querySelector(".file-upload__form");
const myInput = document.querySelector(".file-input");
const progressContainer = document.querySelector(".progress-container");
const uploadedContainer = document.querySelector(".uploaded-container");
uploadForm.addEventListener("click", () => {
  myInput.click();
});
myInput.onchange = ({ target }) => {
  let file = target.files[0];
  if (file) {
    let fileName = file.name;
    if (fileName.length >= 12) {
      let splitName = fileName.split(".");
      fileName = splitName[0].substring(0, 13) + "... ." + splitName[1];
    }
    uploadFile(fileName);
  }
};
function uploadFile(name) {
  let xhrRequest = new XMLHttpRequest();
  const endpoint = "uploadFile.php";
  xhrRequest.open("POST", endpoint);
  xhrRequest.upload.addEventListener("progress", ({ loaded, total }) => {
    let fileLoaded = Math.floor((loaded / total) * 100);
    let fileTotal = Math.floor(total / 1000);
    let fileSize;
    fileTotal < 1024
      ? (fileSize = fileTotal + " KB")
      : (fileSize = (loaded / (1024 * 1024)).toFixed(2) + " MB");
    let progressMarkup = `<li class="row">
                          <i class="fas fa-file-alt"></i>
                          <div class="content-wrapper">
                            <div class="details-wrapper">
                              <span class="name">${name} | <span>Uploading</span></span>
                              <span class="percent">${fileLoaded}%</span>
                            </div>
                            <div class="progress-bar-wrapper">
                              <div class="progress-wrapper" style="width: ${fileLoaded}%"></div>
                            </div>
                          </div>
                        </li>`;
    uploadedContainer.classList.add("onprogress");
    progressContainer.innerHTML = progressMarkup;
    if (loaded == total) {
      progressContainer.innerHTML = "";
      let uploadedMarkup = `<li class="row">
                            <div class="content-wrapper upload">
                              <i class="fas fa-file-alt"></i>
                              <div class="details-wrapper">
                                <span class="name">${name} | <span>Uploaded</span></span>
                                <span class="file-size">${fileSize}</span>
                              </div>
                            </div>
                          </li>`;
      uploadedContainer.classList.remove("onprogress");
      uploadedContainer.insertAdjacentHTML("afterbegin", uploadedMarkup);
    }
  });
  let data = new FormData(uploadForm);
  xhrRequest.send(data);
}

Ce que nous avons fait, c'est pouvoir lire un fichier qui a été sélectionné à l'aide de l'élément file input et créer une nouvelle liste de fichiers sur le DOM. Lorsque le fichier est en cours de téléchargement, le niveau de progression est affiché et lorsque le téléchargement du fichier est terminé, l'état de progression passe à téléchargé.

Ensuite, nous ajoutons également un uploadFile.php à notre projet pour simuler un point de terminaison pour l'envoi de fichiers. La raison en est de simuler l'asynchronité dans notre projet afin que nous obtenions l'effet de chargement de progression.

<?php
  $file_name =  $_FILES['file']['name'];
  $tmp_name = $_FILES['file']['tmp_name'];
  $file_up_name = time().$file_name;
  move_uploaded_file($tmp_name, "files/".$file_up_name);
?>

Conclusion

Vous avez été formidables pour arriver jusqu'à ce point de cet article.

Dans ce tutoriel, vous avez appris à créer un composant de téléchargement de fichiers et à y ajouter une barre de progression. Cela peut être utile lorsque vous créez des sites Web et souhaitez que vos utilisateurs se sentent inclus et aient une idée de la lenteur ou de la rapidité du téléchargement d'un fichier. N'hésitez pas à réutiliser ce projet quand vous le souhaitez.

Si vous êtes bloqué en suivant ce tutoriel, je vous suggère de télécharger votre projet sur GitHub pour obtenir l'aide d'autres développeurs ou vous pouvez également m'envoyer un DM, je serai ravi de vous aider.

Voici un lien vers le dépôt GitHub du projet.

Ressources pertinentes

Documents FontAwesome

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!

php JavaScript css html if for while Directory continue using copy JS dom this animation input github

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 vider le cache Laravel ?Article suivant：Comment vider le cache Laravel ?

Articles Liés

Voir plus