Η μεταφόρτωση αρχείων είναι πολύ διαδεδομένη σε οποιαδήποτε εφαρμογή Ιστού και όταν πρόκειται για τη μεταφόρτωση αρχείων και πόρων μέσω του Διαδικτύου (σε πρόγραμμα περιήγησης), τα πράγματα μπορεί να είναι κάπως αγχωτικά. Ευτυχώς, με την HTML 5, τα στοιχεία εισαγωγής που συνήθως συνοδεύονται από έλεγχο φόρμας για να επιτρέπουν στους χρήστες να τροποποιούν δεδομένα μπορούν να γίνουν τόσο χρήσιμα στην απλοποίηση των πόρων μεταφόρτωσης.
Σε αυτό το άρθρο, θα ρίξουμε μια πιο προσεκτική ματιά στον τρόπο χειρισμού των μεταφορτώσεων αρχείων χρησιμοποιώντας JavaScript vanilla. Ο στόχος είναι να σας διδάξουμε πώς να δημιουργείτε ένα στοιχείο αποστολής αρχείων χωρίς την ανάγκη εξωτερικής βιβλιοθήκης και επίσης να μάθετε μερικές βασικές έννοιες στο JavaScript. Θα μάθετε επίσης πώς να εμφανίζετε την κατάσταση προόδου μιας μεταφόρτωσης καθώς συμβαίνει.
Ας ξεκινήσουμε, παιδιά!
Ρύθμιση έργου
Πρώτα και κύρια, στον κατάλογο που προτιμάτε, δημιουργήστε έναν νέο φάκελο για το έργο:
$ mkdir file-upload-progress-bar-javascript
Αφού το κάνουμε αυτό, ας δημιουργήσουμε τώρα index.html, main.css, να app.js αρχεία όπου θα γράψουμε όλη τη σήμανση για το έργο μας.
$ touch index.html && touch main.css && touch app.js
Τώρα μπορούμε να αρχίσουμε να χτίζουμε τη δομή για τη μεταφόρτωση αρχείων δημιουργώντας ένα βασικό πρότυπο HTML με και ετικέτες:
<!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>
Στη συνέχεια, προσθέτουμε βασικά στυλ για το έργο main.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Για να βελτιώσουμε την εμφάνιση των εφαρμογών μας, θα χρησιμοποιήσουμε τα εικονίδια από την φοβερή βιβλιοθήκη γραμματοσειρών τα οποία μπορούμε να προσθέσουμε στο έργο μας μέσω ενός κώδικα κιτ που μπορεί να δημιουργηθεί στον επίσημο ιστότοπο της βιβλιοθήκης φοβερής γραμματοσειράς.
Τώρα, index.html ενημερώνεται και το main.css το αρχείο είναι συνδεδεμένο:
<!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>
Συνεχίζουμε χτίζοντας τη δομή για το πρόγραμμα μεταφόρτωσης αρχείων:
<!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>
Στη συνέχεια, αντιγράψτε/επικολλήστε τους παρακάτω κωδικούς για ενημέρωση 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;
}
Τώρα, το στοιχείο μοιάζει με αυτό στο πρόγραμμα περιήγησης:
Ρίξτε μια ματιά στον πρακτικό μας οδηγό για την εκμάθηση του Git, με βέλτιστες πρακτικές, πρότυπα αποδεκτά από τον κλάδο και συμπεριλαμβανόμενο φύλλο εξαπάτησης. Σταματήστε τις εντολές του Git στο Google και πραγματικά μαθαίνουν το!
Για να προσθέσουμε την απαιτούμενη λειτουργικότητα για τη μεταφόρτωση στο έργο μας, χρησιμοποιούμε τώρα το app.js αρχείο, όπου γράφουμε κώδικες JavaScript που δίνουν ζωή στο έργο μας.
Αντιγράψτε/επικολλήστε τα παρακάτω 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);
}
Αυτό που κάναμε είναι να μπορούμε να διαβάζουμε ένα αρχείο που έχει επιλεγεί από τη χρήση του στοιχείου εισαγωγής αρχείου και να δημιουργήσουμε μια νέα λίστα αρχείων στο DOM. Όταν γίνεται η αποστολή του αρχείου, εμφανίζεται το επίπεδο προόδου και όταν ολοκληρωθεί η μεταφόρτωση του αρχείου, η κατάσταση προόδου αλλάζει σε μεταφόρτωση.
Στη συνέχεια, προσθέτουμε και ένα uploadFile.php στο έργο μας για να κοροϊδέψουμε ένα τελικό σημείο για την αποστολή αρχείων. Ο λόγος για αυτό είναι η προσομοίωση της ασυγχρονικότητας στο έργο μας έτσι ώστε να έχουμε το εφέ φόρτωσης προόδου.
<?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);
?>
Συμπέρασμα
Ήσασταν καταπληκτικοί να περάσετε σε αυτό το σημείο αυτού του άρθρου.
Σε αυτό το σεμινάριο, μάθαμε πώς να δημιουργήσουμε το στοιχείο αποστολής αρχείων και να προσθέσουμε μια γραμμή προόδου σε αυτό. Αυτό μπορεί να είναι χρήσιμο όταν δημιουργείτε ιστότοπους και θέλετε οι χρήστες σας να αισθάνονται ότι συμπεριλαμβάνονται και να έχουν μια αίσθηση του πόσο αργή ή γρήγορη γίνεται η μεταφόρτωση ενός αρχείου. Μη διστάσετε να επαναχρησιμοποιήσετε αυτό το έργο εάν το επιθυμείτε.
Αν κολλήσετε ενώ ακολουθείτε αυτό το σεμινάριο, σας προτείνω να ανεβάσετε το έργο σας στο GitHub για βοήθεια από άλλους προγραμματιστές ή μπορείτε επίσης να στείλετε ένα dm.
Εδώ είναι μια σύνδεση με το GitHub repo για το έργο.
