Filupload er meget allestedsnærværende for enhver webapplikation, og når det kommer til at uploade filer og ressourcer over internettet (på en browser), kan tingene være noget stressende. Heldigvis, med HTML 5, kan input-elementer, som normalt kommer med formularkontrol for at tillade brugere at ændre data, blive så praktiske til at forenkle upload af ressourcer.
I denne artikel vil vi se nærmere på, hvordan man håndterer filuploads ved hjælp af vanilla JavaScript. Målet er at lære dig, hvordan du opbygger en filoverførselskomponent uden behov for et eksternt bibliotek og også lære nogle kernekoncepter i JavaScript. Du vil også lære, hvordan du viser status for en upload, mens den sker.
Lad os komme i gang, folkens!
Projektopsætning
Først og fremmest skal du i din foretrukne mappe oprette en ny mappe til projektet:
$ mkdir file-upload-progress-bar-javascript
Efter at have gjort det, lad os nu skabe index.html, main.cssog app.js filer, hvor vi vil skrive alle markeringer til vores projekt.
$ touch index.html && touch main.css && touch app.js
Nu kan vi begynde at bygge strukturen for filuploaden ved at lave en grundlæggende HTML-skabelon med , 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>
Dernæst tilføjer vi basisstile til projektet i main.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
For at forbedre udseendet af vores applikationer vil vi gøre brug af ikonerne fra font awesome-biblioteket, som vi kan tilføje til vores projekt gennem en kit-kode, der kan oprettes på det officielle font awesome-biblioteks websted.
Nu index.html er opdateret, og main.css filen er linket:
<!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>
Vi fortsætter med at bygge strukturen for filuploaderen:
<!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>
Kopier/indsæt derefter følgende koder for at opdatere 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 ser komponenten sådan ud i browseren:
Tjek vores praktiske, praktiske guide til at lære Git, med bedste praksis, brancheaccepterede standarder og inkluderet snydeark. Stop med at google Git-kommandoer og faktisk lærer det!
For at tilføje den nødvendige funktionalitet til upload i vores projekt, gør vi nu brug af app.js fil, hvor vi skriver JavaScript-koder, der giver liv til vores projekt.
Kopier/indsæt følgende i 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);
}
Det, vi har gjort, er at kunne læse en fil, der er valgt fra ved hjælp af filindtastningselementet, og oprette en ny liste over filer på DOM. Når filen uploades, vises statusniveauet, og når filen er uploadet, ændres statusstatus til uploadet.
Så tilføjer vi også en uploadFile.php til vores projekt for at håne et slutpunkt for at sende filer. Grunden til dette er at simulere asynkronitet i vores projekt, så vi får progress loading effekt.
<?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);
?>
Konklusion
Du har været fantastisk til at komme igennem til dette punkt i denne artikel.
I denne tutorial har vi lært, hvordan man bygger en filoverførselskomponent og tilføjer en statuslinje til den. Dette kan være nyttigt, når du bygger hjemmesider og ønsker, at dine brugere skal føle sig inkluderet og få en fornemmelse af, hvor langsomt eller hurtigt upload af en fil går. Du er velkommen til at genbruge dette projekt, hvis du ønsker det.
Hvis du går i stå, mens du følger denne tutorial, foreslår jeg, at du uploader dit projekt på GitHub for at få hjælp fra andre udviklere, eller du kan også sende en dm.
Her er et link til GitHub repo for projektet.
