Comment télécharger des fichiers avec Vanilla JavaScript et ajouter une animation de chargement-tutoriel php-php.cn

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

PHPz

Libérer： 2024-08-05 19:00:51

original

1117 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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;
}

Copier après la connexion

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);
}

Copier après la connexion

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);
?>

Copier après la connexion

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.