Het uploaden van bestanden is zeer alomtegenwoordig voor elke webtoepassing en als het gaat om het uploaden van bestanden en bronnen via internet (in een browser), kan het enigszins stressvol zijn. Gelukkig kunnen invoerelementen met HTML 5, die meestal worden geleverd met formulierbeheer waarmee gebruikers gegevens kunnen wijzigen, zo handig worden bij het vereenvoudigen van het uploaden van bronnen.
In dit artikel gaan we dieper in op het omgaan met bestandsuploads met behulp van vanilla JavaScript. Het doel is om u te leren hoe u een component voor het uploaden van bestanden kunt bouwen zonder dat u een externe bibliotheek nodig hebt, en om enkele kernconcepten in JavaScript te leren. U leert ook hoe u de voortgangsstatus van een upload kunt weergeven terwijl deze plaatsvindt.
Laten we beginnen, mensen!
Project Setup
Maak eerst en vooral in uw voorkeursdirectory een nieuwe map voor het project aan:
$ mkdir file-upload-progress-bar-javascript
Nadat we dit hebben gedaan, gaan we nu creëren index.html, main.css en app.js bestanden waarin we alle markeringen voor ons project zullen schrijven.
$ touch index.html && touch main.css && touch app.js
Nu kunnen we beginnen met het bouwen van de structuur voor het uploaden van bestanden door een eenvoudige HTML-sjabloon te maken met en 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>
Vervolgens voegen we basisstijlen voor het project toe main.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Om het uiterlijk van onze applicaties te verbeteren, zullen we gebruik maken van de pictogrammen uit de font awesome-bibliotheek die we aan ons project kunnen toevoegen via een kitcode die kan worden gemaakt op de officiële font awesome-bibliotheekwebsite.
Nu, index.html wordt bijgewerkt, en de main.css bestand is gekoppeld:
<!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>
We gaan verder met het bouwen van de structuur voor de bestandsuploader:
<!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>
Kopieer/plak vervolgens de volgende codes om bij te werken 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;
}
Nu ziet de component er als volgt uit in de browser:
Bekijk onze praktische, praktische gids voor het leren van Git, met best-practices, door de industrie geaccepteerde normen en bijgevoegd spiekbriefje. Stop met Googlen op Git-commando's en eigenlijk leren het!
Om de vereiste functionaliteit voor uploaden toe te voegen aan ons project, maken we nu gebruik van de app.js bestand, waar we JavaScript-codes schrijven die leven geven aan ons project.
Kopieer/plak het volgende in 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);
}
Wat we hebben gedaan, is een bestand kunnen lezen dat is geselecteerd met behulp van het bestandsinvoerelement, en een nieuwe lijst met bestanden op de DOM kunnen maken. Wanneer het bestand wordt geüpload, wordt het voortgangsniveau weergegeven en wanneer het bestand is geüpload, verandert de voortgangsstatus in geüpload.
Dan voegen we ook een toe uploadFile.php naar ons project om een eindpunt voor het verzenden van bestanden te bespotten. De reden hiervoor is om asynchroniteit in ons project te simuleren, zodat we het voortgangslaadeffect krijgen.
<?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);
?>
Conclusie
Je bent geweldig geweest om tot dit punt van dit artikel te komen.
In deze zelfstudie hebben we geleerd hoe we een component voor het uploaden van bestanden kunnen bouwen en er een voortgangsbalk aan kunnen toevoegen. Dit kan handig zijn wanneer u websites bouwt en wilt dat uw gebruikers zich betrokken voelen en een idee krijgen van hoe langzaam of snel het uploaden van een bestand gaat. Voel je vrij om dit project opnieuw te gebruiken als je dat wilt.
Als je vastloopt tijdens het volgen van deze tutorial, raad ik je aan je project op GitHub te uploaden voor hulp van andere ontwikkelaars of je kunt ook een dm sturen.
Hier is een link naar de GitHub-opslagplaats voor het project.
