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, können die Dinge etwas stressig sein. Glücklicherweise können mit HTML 5 Eingabeelemente, die normalerweise mit Formularsteuerung ausgestattet sind, um Benutzern das Ändern von Daten zu ermöglichen, so praktisch werden, um das Hochladen von Ressourcen zu vereinfachen.
In diesem Artikel würden wir uns genauer ansehen, wie Datei-Uploads mit Vanilla JavaScript gehandhabt werden. 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 lernen. Sie erfahren auch, wie Sie den Fortschrittsstatus eines Uploads während des Vorgangs anzeigen können.
Lasst uns anfangen, Leute!
Projektaufbau
Erstellen Sie zunächst in Ihrem bevorzugten Verzeichnis einen neuen Ordner für das Projekt:
$ mkdir file-upload-progress-bar-javascript
Lassen Sie uns danach nun erstellen index.html, main.css und app.js Dateien, in denen wir das gesamte Markup für unser Projekt schreiben.
$ touch index.html && touch main.css && touch app.js
Jetzt können wir damit beginnen, die Struktur für den Datei-Upload aufzubauen, indem wir eine grundlegende 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 hinzu main.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Um das Aussehen unserer Anwendungen zu verbessern, verwenden wir die Symbole aus der Font Awesome Library, die wir unserem Projekt über einen Kit-Code hinzufügen können, der auf der offiziellen Website der Font Awesome Library erstellt werden kann.
Jetzt, index.html aktualisiert wird, und die main.css Datei 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 fort, indem wir die Struktur für den Datei-Uploader erstellen:
<!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>
Kopieren Sie dann die folgenden Codes, um sie zu aktualisieren 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;
}
Nun sieht die Komponente im Browser so aus:
Sehen Sie sich unseren praxisnahen, praktischen Leitfaden zum Erlernen von Git an, mit Best Practices, branchenweit akzeptierten Standards und einem mitgelieferten Spickzettel. Hören Sie auf, Git-Befehle zu googeln und tatsächlich in Verbindung, um es!
Um die erforderliche Funktionalität zum Hochladen in unser Projekt hinzuzufügen, verwenden wir jetzt die app.js Datei, in der wir JavaScript-Codes schreiben, die unserem Projekt Leben einhauchen.
Kopieren Sie Folgendes und fügen Sie es ein 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 = `
${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 lesen zu können, die mit dem file input-Element ausgewählt wurde, und eine neue Liste von Dateien im DOM zu erstellen. Wenn die Datei hochgeladen wird, wird die Fortschrittsstufe angezeigt, und wenn die Datei hochgeladen ist, ändert sich der Fortschrittsstatus in hochgeladen.
Dann fügen wir auch ein hinzu uploadFile.php zu unserem Projekt, um einen Endpunkt zum Senden von Dateien zu simulieren. Der Grund dafür ist, 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);
?>
Zusammenfassung
Sie waren großartig, bis zu diesem Punkt dieses Artikels durchzukommen.
In diesem Tutorial haben wir gelernt, wie man eine Datei-Upload-Komponente erstellt und ihr einen Fortschrittsbalken hinzufügt. 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 vor sich geht. Fühlen Sie sich frei, dieses Projekt wiederzuverwenden, wenn Sie möchten.
Wenn Sie beim Durcharbeiten dieses Tutorials nicht weiterkommen, schlage ich vor, dass Sie Ihr Projekt auf GitHub hochladen, um Hilfe von anderen Entwicklern zu erhalten, oder Sie können auch eine DM senden.
Hier ist ein Link, um die GitHub-Repo für das Projekt.
