So laden Sie Dateien mit Vanilla-JavaScript hoch und fügen eine Ladeanimation hinzu-PHP-Tutorial-php.cn

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

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 erstellen, ohne dass eine externe Bibliothek erforderlich ist, und außerdem einige Kernkonzepte in JavaScript zu erlernen. Außerdem erfahren Sie, wie Sie den Fortschrittsstatus eines Uploads anzeigen können, während er stattfindet.

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

<!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>

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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 Library erstellt werden kann, zu unserem Projekt hinzufügen können.

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

<!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>

Nach dem Login kopieren

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

<!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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Wir haben es geschafft, 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.

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

Nach dem Login kopieren

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

Das obige ist der detaillierte Inhalt vonSo laden Sie Dateien mit Vanilla-JavaScript hoch und fügen eine Ladeanimation hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!