Das Hochladen von Dateien ist in jeder Webanwendung allgegenwärtig und wenn es darum geht, Dateien und Ressourcen über das Internet (in einem Browser) hochzuladen, kann es etwas stressig sein. Glücklicherweise können mit HTML 5 Eingabeelemente, die normalerweise mit einer Formularsteuerung ausgestattet sind, die es Benutzern ermöglicht, Daten zu ändern, sehr praktisch sein, um das Hochladen von Ressourcen zu vereinfachen.

In diesem Artikel werfen wir einen genaueren Blick auf die Handhabung von Datei-Uploads mit Vanilla-JavaScript. Ziel ist es, Ihnen beizubringen, wie Sie eine Datei-Upload-Komponente ohne die Notwendigkeit einer externen Bibliothek erstellen und einige Kernkonzepte in JavaScript erlernen. Außerdem erfahren Sie, wie Sie den Fortschrittsstatus eines Uploads während des Vorgangs anzeigen können.

Quellcode: Wie üblich können Sie den im GitHub-Repo gehosteten Quellcode für das Projekt verwenden.

Projekt-Setup

Erstellen Sie zunächst in Ihrem bevorzugten Verzeichnis einen neuen Ordner für das Projekt:

$ mkdir file-upload-progress-bar-javascript

Danach erstellen wir nun die Dateien index.html, main.css und app.js, in die wir das gesamte Markup für unser Projekt schreiben.

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

Jetzt können wir mit dem Aufbau der Struktur für den Datei-Upload beginnen, indem wir eine einfache HTML-Vorlage mit den Tags

und erstellen:

Als nächstes fügen wir Basisstile für das Projekt in main.css hinzu:

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

Um das Aussehen unserer Anwendungen zu verbessern, verwenden wir die Symbole aus der Font-Awesome-Bibliothek, die wir über einen Kit-Code, der auf der offiziellen Website der Font-Awesome-Bibliothek erstellt werden kann, zu unserem Projekt hinzufügen können.

Jetzt wird index.html aktualisiert und die Datei main.css ist verlinkt:

Wir fahren mit dem Aufbau der Struktur für den Datei-Uploader fort:

  
    
    
    
    
    
    
  
  
    

      
File Uploader JavaScript with Progress
      

        

            
            
            
Browse File to Upload
          
          

            

            

          
      
    
    
  

Dann kopieren/fügen Sie die folgenden Codes ein, um main.css zu aktualisieren:

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

Jetzt sollte die Komponente im Browser besser aussehen:

Hinzufügen der Upload-Funktionalität

Um die erforderliche Funktionalität zum Hochladen in unserem Projekt hinzuzufügen, verwenden wir jetzt die Datei app.js, in der wir JavaScript-Codes schreiben, die unserem Projekt Leben einhauchen.

Kopieren Sie Folgendes und fügen Sie es in app.js ein:

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 
                          
                          

                            

                              ${name} | Uploading
                              ${fileLoaded}%
                            
                            

                              

                            
                          
                        `;
    uploadedContainer.classList.add("onprogress");
    progressContainer.innerHTML = progressMarkup;
    if (loaded == total) {
      progressContainer.innerHTML = "";
      let uploadedMarkup = `

${name} | Uploaded ${fileSize}

`; uploadedContainer.classList.remove("onprogress"); uploadedContainer.insertAdjacentHTML("afterbegin", uploadedMarkup); } }); let data = new FormData(uploadForm); xhrRequest.send(data); }

Was wir getan haben, ist, eine Datei zu lesen, die mithilfe des Dateieingabeelements ausgewählt wurde, und eine neue Liste von Dateien im DOM zu erstellen. Wenn die Datei hochgeladen wird, wird der Fortschrittsstatus angezeigt, und wenn der Upload der Datei abgeschlossen ist, ändert sich der Fortschrittsstatus in „Hochgeladen“.

Dann fügen wir unserem Projekt auch eine uploadFile.php hinzu, um einen Endpunkt zum Senden von Dateien zu simulieren. Der Grund dafür besteht darin, Asynchronität in unserem Projekt zu simulieren, damit wir den Fortschrittsladeeffekt erhalten.

Abschluss

Es war großartig, dass Sie bis zu diesem Punkt dieses Artikels gekommen sind.

In diesem Tutorial haben Sie gelernt, wie Sie eine Datei-Upload-Komponente erstellen und ihr einen Fortschrittsbalken hinzufügen. Dies kann nützlich sein, wenn Sie Websites erstellen und möchten, dass sich Ihre Benutzer einbezogen fühlen und ein Gefühl dafür bekommen, wie langsam oder schnell das Hochladen einer Datei verläuft. Sie können dieses Projekt jederzeit wiederverwenden.

Wenn Sie beim Durcharbeiten dieses Tutorials nicht weiterkommen, empfehle ich Ihnen, Ihr Projekt auf GitHub hochzuladen, um Hilfe von anderen Entwicklern zu erhalten, oder Sie können mir auch eine DM senden, ich helfe Ihnen gerne weiter.

Hier ist ein Link zum GitHub-Repo für das Projekt.

Relevante Ressourcen

• FontAwesome Docs