Filuppladdning är mycket allmänt förekommande för alla webbapplikationer och när det kommer till att ladda upp filer och resurser över internet (i en webbläsare) kan saker och ting vara lite stressande. Lyckligtvis, med HTML 5, kan inmatningselement som vanligtvis kommer med formulärkontroll för att tillåta användare att ändra data bli så praktiska för att förenkla uppladdningsresurser.
I den här artikeln skulle vi titta närmare på hur man hanterar filuppladdningar med vanilla JavaScript. Syftet är att lära dig hur man bygger en filuppladdningskomponent utan behov av ett externt bibliotek och även lära dig några kärnbegrepp i JavaScript. Du kommer också att lära dig hur du visar status för en uppladdning när den sker.
Låt oss börja, gott folk!
Projektinställning
Först och främst, i din föredragna katalog, skapa en ny mapp för projektet:
$ mkdir file-upload-progress-bar-javascript
Efter att ha gjort det, låt oss nu skapa index.html, main.cssoch app.js filer där vi kommer att skriva all uppmärkning för vårt projekt.
$ touch index.html && touch main.css && touch app.js
Nu kan vi börja bygga strukturen för filuppladdningen genom att skapa en grundläggande HTML-mall med och Taggar:
<!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>
Därefter lägger vi till basstilar för projektet i main.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
För att förbättra utseendet på våra applikationer kommer vi att använda ikonerna från font awesome-biblioteket som vi kan lägga till i vårt projekt genom en kitkod som kan skapas på den officiella font awesome-bibliotekets webbplats.
Nu, index.html är uppdaterad, och main.css filen är länkad:
<!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 att bygga strukturen för filuppladdaren:
<!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>
Kopiera/klistra sedan in följande koder för att uppdatera 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 ut så här i webbläsaren:
Kolla in vår praktiska, praktiska guide för att lära dig Git, med bästa praxis, branschaccepterade standarder och medföljande fuskblad. Sluta googla Git-kommandon och faktiskt lära Det!
För att lägga till den funktionalitet som krävs för uppladdning i vårt projekt använder vi nu app.js fil, där vi skriver JavaScript-koder som ger liv åt vårt projekt.
Kopiera/klistra in följande 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);
}
Vad vi har gjort är att kunna läsa en fil som har valts från att använda filinmatningselementet, och skapa en ny lista med filer på DOM. När filen laddas upp visas förloppsnivån, och när filen är färdig uppladdad ändras förloppsstatusen till uppladdad.
Sedan lägger vi också till en uploadFile.php till vårt projekt för att håna en slutpunkt för att skicka filer. Anledningen till detta är att simulera asynkronitet i vårt projekt så att vi får framstegsladdningseffekten.
<?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);
?>
Slutsats
Du har varit fantastisk att komma igenom till denna punkt i den här artikeln.
I den här handledningen har vi lärt oss hur man bygger en filuppladdningskomponent och lägger till en förloppsindikator till den. Detta kan vara användbart när du bygger webbplatser och vill att dina användare ska känna sig inkluderade och få en känsla av hur långsamt eller snabbt det går att ladda upp en fil. Återanvänd gärna detta projekt om du vill.
Om du fastnar när du följer den här handledningen föreslår jag att du laddar upp ditt projekt på GitHub för hjälp från andra utvecklare eller så kan du också skicka ett dm.
Här är en länk till GitHub repo för projektet.
