Încărcarea fișierelor este foarte omniprezentă în orice aplicație web și atunci când vine vorba de încărcarea fișierelor și resurselor pe internet (pe un browser), lucrurile pot fi oarecum stresante. Din fericire, cu HTML 5, elementele de intrare care de obicei vin cu controlul formularelor pentru a permite utilizatorilor să modifice datele pot deveni atât de utile în simplificarea resurselor de încărcare.
În acest articol, vom arunca o privire mai atentă asupra modului de a gestiona încărcările de fișiere folosind JavaScript vanilla. Scopul este să vă învețe cum să construiți o componentă de încărcare a fișierelor fără a fi nevoie de o bibliotecă externă și, de asemenea, să învățați câteva concepte de bază în JavaScript. Veți învăța, de asemenea, cum să afișați starea progresului unei încărcări pe măsură ce se întâmplă.
Să începem, oameni buni!
Configurare proiect
În primul rând, în directorul preferat, creați un folder nou pentru proiect:
$ mkdir file-upload-progress-bar-javascript
După ce facem acest lucru, acum să creăm index.html, main.css, și app.js fișiere în care vom scrie toate markupurile pentru proiectul nostru.
$ touch index.html && touch main.css && touch app.js
Acum putem începe să construim structura pentru încărcarea fișierului prin crearea unui șablon HTML de bază cu și Tag-uri:
<!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>
Apoi, adăugăm stiluri de bază pentru proiect în main.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Pentru a îmbunătăți aspectul aplicațiilor noastre, vom folosi pictogramele din biblioteca font awesome pe care le putem adăuga la proiectul nostru printr-un cod de kit care poate fi creat pe site-ul web oficial al bibliotecii font awesome.
Acum, index.html este actualizat, iar main.css fisierul este legat:
<!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>
Continuăm construind structura pentru încărcătorul de fișiere:
<!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>
Apoi, copiați/lipiți următoarele coduri pentru a actualiza 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;
}
Acum, componenta arată astfel pe browser:
Consultați ghidul nostru practic și practic pentru a învăța Git, cu cele mai bune practici, standarde acceptate de industrie și fisa de cheat incluse. Opriți căutarea pe Google a comenzilor Git și de fapt învăţa aceasta!
Pentru a adăuga funcționalitatea necesară pentru încărcare în proiectul nostru, acum folosim app.js fișier, unde scriem coduri JavaScript care dau viață proiectului nostru.
Copiați/lipiți următoarele în 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);
}
Ceea ce am făcut este să putem citi un fișier care a fost selectat folosind elementul de intrare fișier și să creăm o nouă listă de fișiere pe DOM. Când fișierul este încărcat, este afișat nivelul de progres, iar când fișierul este încărcat complet, starea de progres se schimbă în încărcat.
Apoi, adăugăm și un uploadFile.php la proiectul nostru pentru a bate joc de un punct final pentru trimiterea fișierelor. Motivul pentru aceasta este acela de a simula asincronitatea în proiectul nostru, astfel încât să obținem efectul de încărcare a progresului.
<?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);
?>
Concluzie
Ai fost minunat să ajungi la acest punct al acestui articol.
În acest tutorial, am învățat cum să construim o componentă de încărcare a fișierelor și să îi adăugăm o bară de progres. Acest lucru poate fi util atunci când creați site-uri web și doriți ca utilizatorii dvs. să se simtă incluși și să aibă o idee despre cât de lentă sau rapidă decurge încărcarea unui fișier. Simțiți-vă liber să reutilizați acest proiect dacă doriți.
Dacă rămâneți blocat în timp ce urmați acest tutorial, vă sugerez să vă încărcați proiectul pe GitHub pentru ajutor de la alți dezvoltatori sau să trimiteți și un dm.
Aici este un link la Repoziție GitHub pentru proiect.
