A fájlfeltöltés minden webalkalmazásban mindenütt jelen van, és amikor a fájlok és erőforrások interneten keresztül (böngészőn) kell feltölteniük, a dolgok kissé megterhelőek lehetnek. Szerencsére a HTML 5 esetében a bemeneti elemek, amelyek általában az űrlapvezérléssel együtt járnak, lehetővé teszik a felhasználók számára az adatok módosítását, nagyon hasznosak lehetnek az erőforrások feltöltésének egyszerűsítésében.
Ebben a cikkben közelebbről megvizsgáljuk, hogyan kezeljük a fájlfeltöltéseket vanilla JavaScript használatával. A cél az, hogy megtanítsuk, hogyan készítsünk fájlfeltöltési összetevőt külső könyvtár nélkül, és megtanuljunk néhány alapvető JavaScript-fogalmat. Azt is megtudhatja, hogyan jelenítheti meg a feltöltés folyamatának állapotát.
Kezdjük, emberek!
Projekt beállítása
Mindenekelőtt a kívánt könyvtárban hozzon létre egy új mappát a projekt számára:
$ mkdir file-upload-progress-bar-javascript
Miután ezt megtettük, most hozzunk létre index.html, main.cssés app.js fájlokat, ahová a projektünk összes jelölését írjuk.
$ touch index.html && touch main.css && touch app.js
Most elkezdhetjük felépíteni a fájlfeltöltés struktúráját egy alap HTML-sablon létrehozásával és a címkék:
<!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>
Ezután hozzáadjuk a projekt alapstílusait main.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Alkalmazásaink megjelenésének javítása érdekében felhasználjuk a font awesome könyvtár ikonjait, amelyeket a hivatalos font awesome könyvtár weboldalán létrehozható készletkódon keresztül hozzáadhatunk projektünkhöz.
Most, index.html frissül, és a main.css fájl linkelve:
<!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>
Folytatjuk a fájlfeltöltő szerkezetének felépítésével:
<!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>
Ezután a frissítéshez másolja/illessze be a következő kódokat 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;
}
Most a komponens így néz ki a böngészőben:
Tekintse meg gyakorlatias, gyakorlati útmutatónkat a Git tanulásához, amely tartalmazza a bevált gyakorlatokat, az iparág által elfogadott szabványokat és a mellékelt csalólapot. Hagyd abba a guglizást a Git parancsokkal, és valójában tanulni meg!
A feltöltéshez szükséges funkciók hozzáadásához a projektünkben most a app.js fájl, ahová JavaScript kódokat írunk, amelyek életet adnak projektünknek.
Másolja/illessze be a következőket 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);
}
Amit tettünk, az az, hogy el tudjuk olvasni a fájlbeviteli elem segítségével kiválasztott fájlt, és létrehozunk egy új fájllistát a DOM-on. A fájl feltöltésekor megjelenik az előrehaladási szint, és amikor a fájl feltöltése befejeződött, a folyamat állapota feltöltve állapotra vált.
Ezután hozzáadunk egy uploadFile.php projektünkhöz, hogy megcsúfoljunk egy fájlküldési végpontot. Ennek az az oka, hogy szimuláljuk az aszinkronitást a projektünkben, hogy megkapjuk a folyamatbetöltési hatást.
<?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);
?>
Következtetés
Nagyszerű volt, hogy eljutott a cikk idáig.
Ebben az oktatóanyagban megtanultuk, hogyan készítsünk fájlfeltöltési összetevőt, és hogyan adjunk hozzá folyamatjelző sávot. Ez akkor lehet hasznos, ha webhelyeket készít, és azt szeretné, hogy a felhasználók érezzék magukat, és érezzék, milyen lassú vagy gyors a fájlfeltöltés. Ha szeretné, nyugodtan használja újra ezt a projektet.
Ha elakad az oktatóanyag követése közben, azt javaslom, hogy töltse fel projektjét a GitHubra, hogy segítsen más fejlesztőktől, vagy küldjön egy dm-et is.
Itt van egy link, hogy a GitHub repo a projekthez.
