Tiedostojen lataaminen on erittäin yleistä missä tahansa verkkosovelluksessa, ja kun on kyse tiedostojen ja resurssien lataamisesta Internetin kautta (selaimella), asiat voivat olla hieman stressaavia. Onneksi HTML 5:ssä syöttöelementit, jotka yleensä tulevat lomakkeen hallinnan avulla, jotta käyttäjät voivat muokata tietoja, voivat olla käteviä resurssien lataamisen yksinkertaistamisessa.
Tässä artikkelissa tarkastelemme tarkemmin, kuinka käsitellä tiedostojen lataamista vanilja-JavaScriptin avulla. Tavoitteena on opettaa sinua rakentamaan tiedostojen latauskomponentti ilman ulkoista kirjastoa ja oppia myös JavaScriptin ydinkäsitteitä. Opit myös, kuinka voit näyttää latauksen edistymisen sen tapahtuessa.
Aloitetaan, hyvät ihmiset!
Projektin asennus
Ensinnäkin, luo uusi kansio haluamaasi hakemistoon projektille:
$ mkdir file-upload-progress-bar-javascript
Kun olet tehnyt niin, luokaamme nyt index.html, main.cssja app.js tiedostot, joihin kirjoitamme kaikki projektimme merkinnät.
$ touch index.html && touch main.css && touch app.js
Nyt voimme alkaa rakentaa tiedostojen latauksen rakennetta luomalla HTML-perusmalli ja tunnisteet:
<!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>
Seuraavaksi lisäämme projektin perustyylejä main.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Parantaaksemme sovellustemme ulkoasua hyödynnämme fontti awesome -kirjaston kuvakkeita, jotka voimme lisätä projektiimme sarjakoodin avulla, joka voidaan luoda virallisella font awesome -kirjaston verkkosivustolla.
Nyt, index.html on päivitetty, ja main.css tiedosto on linkitetty:
<!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>
Jatkamme rakentamalla rakenteen tiedostojen lataajalle:
<!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>
Päivitä sitten kopioimalla/liittämällä seuraavat koodit 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;
}
Nyt komponentti näyttää selaimessa tältä:
Tutustu käytännönläheiseen, käytännölliseen Gitin oppimisoppaaseemme, jossa on parhaat käytännöt, alan hyväksymät standardit ja mukana tuleva huijauslehti. Lopeta Git-komentojen googlailu ja oikeastaan oppia se!
Lisätäksemme tarvittavat toiminnot lataukseen projektiimme, käytämme nyt app.js tiedosto, johon kirjoitamme JavaScript-koodeja, jotka antavat eloa projektillemme.
Kopioi/liitä seuraavat kohteet 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);
}
Olemme pystyneet lukemaan tiedoston, joka on valittu tiedoston syöttöelementin avulla, ja luomaan uuden luettelon tiedostoista DOM:iin. Kun tiedostoa ladataan, edistymistaso näytetään, ja kun tiedoston lataus on valmis, edistymisen tilaksi vaihtuu ladattu.
Sitten lisäämme myös an uploadFile.php projektiimme pilkata tiedostojen lähettämisen päätepistettä. Syynä tähän on simuloida asynkroniteettia projektissamme, jotta saamme edistymisen latausvaikutuksen.
<?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);
?>
Yhteenveto
Olet ollut mahtava, kun olet päässyt tämän artikkelin tähän kohtaan.
Tässä opetusohjelmassa olemme oppineet rakentamaan tiedostojen latauskomponentin ja lisäämään siihen edistymispalkin. Tästä voi olla hyötyä, kun rakennat verkkosivustoja ja haluat, että käyttäjät tuntevat olevansa mukana ja saavat käsityksen siitä, kuinka hitaasti tai nopeasti tiedoston lataaminen tapahtuu. Voit vapaasti käyttää tätä projektia uudelleen, jos haluat.
Jos jumiudut seuraaessasi tätä opetusohjelmaa, suosittelen, että lataat projektisi GitHubiin saadaksesi apua muilta kehittäjiltä tai voit myös lähettää dm:n.
Tässä on linkki GitHub repo projektille.
