Загрузка файлов очень распространена в любом веб-приложении, и когда дело доходит до загрузки файлов и ресурсов через Интернет (в браузере), это может быть несколько напряжно. К счастью, в HTML 5 элементы ввода, которые обычно поставляются с элементами управления формой, позволяющими пользователям изменять данные, могут стать очень удобными для упрощения загрузки ресурсов.
В этой статье мы более подробно рассмотрим, как обрабатывать загрузку файлов с помощью ванильного JavaScript. Цель состоит в том, чтобы научить вас создавать компонент загрузки файлов без необходимости использования внешней библиотеки, а также изучить некоторые основные концепции 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;
}
Чтобы улучшить внешний вид наших приложений, мы будем использовать значки из библиотеки шрифтов awesome, которые мы можем добавить в наш проект с помощью кода комплекта, который можно создать на официальном веб-сайте библиотеки шрифтов awesome.
Теперь, 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 и на самом деле изучить это!
Чтобы добавить необходимую функциональность для загрузки в наш проект, мы теперь используем 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.
