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.
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
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>
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 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>
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>
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:
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);
}
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); ?>
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.
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!
