Il caricamento di file è molto onnipresente in qualsiasi applicazione Web e quando si tratta di caricare file e risorse su Internet (su un browser), le cose possono essere alquanto stressanti. Fortunatamente, con HTML 5, gli elementi di input che di solito vengono forniti con il controllo del modulo per consentire agli utenti di modificare i dati possono diventare così utili per semplificare il caricamento delle risorse.
In questo articolo, daremo un'occhiata più da vicino a come gestire i caricamenti di file utilizzando JavaScript vanilla. L'obiettivo è insegnarti come creare un componente di caricamento file senza la necessità di una libreria esterna e apprendere anche alcuni concetti fondamentali in JavaScript. Imparerai anche come mostrare lo stato di avanzamento di un caricamento man mano che avviene.
Cominciamo, gente!
Impostazione del progetto
Innanzitutto, nella tua directory preferita, crea una nuova cartella per il progetto:
$ mkdir file-upload-progress-bar-javascript
Dopo averlo fatto, creiamo ora index.html, main.csse app.js file in cui scriveremo tutto il markup per il nostro progetto.
$ touch index.html && touch main.css && touch app.js
Ora possiamo iniziare a costruire la struttura per il caricamento del file creando un modello HTML di base con ed 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>
Successivamente, aggiungiamo gli stili di base per il progetto in main.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Per migliorare l'aspetto delle nostre applicazioni, utilizzeremo le icone della libreria font awesome che possiamo aggiungere al nostro progetto tramite un codice kit che può essere creato sul sito Web ufficiale della libreria font awesome.
Adesso, index.html viene aggiornato e il main.css il file è collegato:
<!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>
Continuiamo costruendo la struttura per il file uploader:
<!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>
Quindi, copia/incolla i seguenti codici per aggiornare 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;
}
Ora, il componente ha questo aspetto nel browser:
Dai un'occhiata alla nostra guida pratica e pratica per l'apprendimento di Git, con le migliori pratiche, gli standard accettati dal settore e il cheat sheet incluso. Smetti di cercare su Google i comandi Git e in realtà imparare esso!
Per aggiungere la funzionalità richiesta per il caricamento nel nostro progetto, ora utilizziamo il file app.js file, dove scriviamo codici JavaScript che danno vita al nostro progetto.
Copia/incolla quanto segue in 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);
}
Quello che abbiamo fatto è essere in grado di leggere un file che è stato selezionato utilizzando l'elemento file input e creare un nuovo elenco di file sul DOM. Quando il file viene caricato, viene mostrato il livello di avanzamento e quando il caricamento del file è completato, lo stato di avanzamento cambia in caricato.
Quindi, aggiungiamo anche un uploadFile.php al nostro progetto per deridere un endpoit per l'invio di file. La ragione di ciò è simulare l'asincronia nel nostro progetto in modo da ottenere l'effetto di caricamento del progresso.
<?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);
?>
Conclusione
Sei stato fantastico per arrivare a questo punto di questo articolo.
In questo tutorial, abbiamo imparato come creare un componente di caricamento file e aggiungere una barra di avanzamento. Questo può essere utile quando crei siti Web e desideri che i tuoi utenti si sentano inclusi e abbiano un'idea di quanto sia lento o veloce il caricamento di un file. Sentiti libero di riutilizzare questo progetto se lo desideri.
Se rimani bloccato mentre segui questo tutorial, ti suggerisco di caricare il tuo progetto su GitHub per ricevere aiuto da altri sviluppatori o puoi anche inviare un dm.
Ecco un link per la repository GitHub per il progetto.
