Home
JavaScript
php

Téléchargement de fichiers avec barre de progression HTML CSS JavaScript & PHP

Hé les amis, aujourd’hui, dans ce blog, vous apprendrez comment créer un "téléchargeur de fichier avec progression en HTML CSS et JavaScript et PHP".
Dans ce projet (File Upload JavaScript with Progress Bar), comme vous pouvez le voir dans l’image d’aperçu, il y a deux images du téléchargeur de fichiers. Dans le premier, il y a un conteneur de bordure en pointillés avec une icône et du texte pour parcourir le fichier à télécharger.

Lorsque vous cliquez sur ce conteneur, une fenêtre de fichier ouverte s’ouvre et vous pouvez sélectionner n’importe quel fichier à télécharger. Une fois que vous avez sélectionné le fichier, vous pouvez voir dans la deuxième image, il est affiché votre statut de téléchargement de fichier avec le nom du fichier, le pourcentage téléchargé, la barre de progression, etc. Et il y a l’historique des fichiers téléchargés avec le nom du fichier, la taille, etc.

Code Source

J’espère que vous avez aimé ce File Uploader et que vous voulez obtenir les codes sources ou les fichiers de ce projet, mais ne vous inquiétez pas, j’ai donné des codes et des fichiers sources lien de téléchargement au bas de la page. Mais avant de copier-coller les codes ou de télécharger des fichiers, parlons des codes et concepts importants derrière la création de ce téléchargeur de fichiers.
Dans le fichier JavaScript, j’ai utilisé l’événement change pour obtenir le nom de fichier sélectionné par l’utilisateur, puis j’ai appelé la fonction uploadFile(filename) en passant le nom de fichier en argument. Dans la fonction uploadFile(), en utilisant Ajax, j’ai envoyé le fichier sélectionné au PHP. Comme vous pouvez l’avoir vu sur les codes, j’ai utilisé la propriété upload et l’événement progress pour obtenir la valeur chargée du fichier et la taille totale du fichier.
Dans le fichier PHP, j’ai reçu le fichier et ajouté l’heure actuelle avant le nom de fichier pour rendre le nom de fichier dynamique et déplacé ce fichier dans le dossier fichiers en utilisant la fonction PHP intégrée. move_uploaded_file

Code HTML

Nous commençons par le code HTML. Tout d’abord, copiez le code ci-dessous et collez-le dans votre fichier HTML.

Double taper sur le code pour copier son contenu


<!DOCTYPE html>
<!-- codingteam.tech  -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
  <div class="wrapper">
    <header>File Uploader</header>
    <form action="#">
      <input class="file-input" type="file" name="file" hidden>
      <i class="fas fa-cloud-upload-alt"></i>
      <p>Cliquez ici pour naviguer dans vos fichiers</p>
    </form>
    <section class="progress-area"></section>
    <section class="uploaded-area"></section>
  </div>

  <script src="script.js"></script>

</body>
</html>

Code CSS

Ensuite, nous stylisons notre application en utilisant CSS. Pour cette copie, le code qui vous a été fourni ci-dessous et collez-le dans une feuille de style.

Double taper sur le code pour copier son contenu


/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #6990F2;
}

::selection{
  color: #fff;
  background: #6990F2;
}
.wrapper{
  width: 430px;
  background: #fff;
  border-radius: 5px;
  padding: 30px;
  box-shadow: 7px 7px 12px rgba(0,0,0,0.05);
}
.wrapper header{
  color: #6990F2;
  font-size: 27px;
  font-weight: 600;
  text-align: center;
}
.wrapper form{
  height: 167px;
  display: flex;
  cursor: pointer;
  margin: 30px 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 5px;
  border: 2px dashed #6990F2;
}
form :where(i, p){
  color: #6990F2;
}
form i{
  font-size: 50px;
}
form p{
  margin-top: 15px;
  font-size: 16px;
}

section .row{
  margin-bottom: 10px;
  background: #E9F0FF;
  list-style: none;
  padding: 15px 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
section .row i{
  color: #6990F2;
  font-size: 30px;
}
section .details span{
  font-size: 14px;
}
.progress-area .row .content{
  width: 100%;
  margin-left: 15px;
}
.progress-area .details{
  display: flex;
  align-items: center;
  margin-bottom: 7px;
  justify-content: space-between;
}
.progress-area .content .progress-bar{
  height: 6px;
  width: 100%;
  margin-bottom: 4px;
  background: #fff;
  border-radius: 30px;
}
.content .progress-bar .progress{
  height: 100%;
  width: 0%;
  background: #6990F2;
  border-radius: inherit;
}
.uploaded-area{
  max-height: 232px;
  overflow-y: scroll;
}
.uploaded-area.onprogress{
  max-height: 150px;
}
.uploaded-area::-webkit-scrollbar{
  width: 0px;
}
.uploaded-area .row .content{
  display: flex;
  align-items: center;
}
.uploaded-area .row .details{
  display: flex;
  margin-left: 15px;
  flex-direction: column;
}
.uploaded-area .row .details .size{
  color: #404040;
  font-size: 11px;
}
.uploaded-area i.fa-check{
  font-size: 16px;
}

Code javascript

Ensuite, nous utilisons javascript Pour cette copie, le code qui vous a été fourni ci-dessous et collez-le dans la partie js

Double taper sur le code pour copier son contenu


const form = document.querySelector("form"),
fileInput = document.querySelector(".file-input"),
progressArea = document.querySelector(".progress-area"),
uploadedArea = document.querySelector(".uploaded-area");

form.addEventListener("click", () =>{
  fileInput.click();
});

fileInput.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 xhr = new XMLHttpRequest();
  xhr.open("POST", "php/upload.php");
  xhr.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 progressHTML = `<li class="row">
                          <i class="fas fa-file-alt"></i>
                          <div class="content">
                            <div class="details">
                              <span class="name">${name} • Enregistrement</span>
                              <span class="percent">${fileLoaded}%</span>
                            </div>
                            <div class="progress-bar">
                              <div class="progress" style="width: ${fileLoaded}%"></div>
                            </div>
                          </div>
                        </li>`;
    uploadedArea.classList.add("onprogress");
    progressArea.innerHTML = progressHTML;
    if(loaded == total){
      progressArea.innerHTML = "";
      let uploadedHTML = `<li class="row">
                            <div class="content upload">
                              <i class="fas fa-file-alt"></i>
                              <div class="details">
                                <span class="name">${name} • Stockée</span>
                                <span class="size">${fileSize}</span>
                              </div>
                            </div>
                            <i class="fas fa-check"></i>
                          </li>`;
      uploadedArea.classList.remove("onprogress");
      uploadedArea.insertAdjacentHTML("afterbegin", uploadedHTML);
    }
  });
  let data = new FormData(form);
  xhr.send(data);
}

Code PHP

Enfin, créez un fichier PHP avec le nom du message.php et collez les codes donnés dans votre fichier PHP. N’oubliez pas que vous devez créer un fichier avec .php extension.

Double taper sur le code pour copier son contenu


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

Télécharger le code source

Télécharger le code (3,9 Ko)

Téléchargement du fichier


N'hesite pas à commenter!


Télécharger

Commentaires

  • A+
  • A-