از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
آپلود فایل با جاوا اسکریپت وانیلی و بارگذاری انیمیشن بارگذاری فایل برای هر برنامه وب بسیار فراگیر است و در مورد آپلود فایل ها و منابع از طریق اینترنت (روی یک مرورگر) ، همه چیز می تواند تا حدودی استرس زا باشد. خوشبختانه ، با HTML 5 ، عناصر ورودی که معمولاً با کنترل فرم همراه هستند تا به کاربران اجازه دهند داده ها را تغییر دهند می توانند چنین شوند …
سرفصلهای مطلب
بارگذاری پرونده برای هر برنامه وب بسیار همه جا است و وقتی نوبت به بارگذاری پرونده ها و منابع از طریق اینترنت می رسد (روی یک مرورگر) ، همه چیز می تواند تا حدودی استرس زا باشد. خوشبختانه، با HTML 5، عناصر ورودی که معمولاً با کنترل فرم همراه هستند تا به کاربران اجازه دهند داده ها را تغییر دهند، می توانند در ساده سازی منابع آپلود بسیار مفید باشند.
در این مقاله ، ما به روش رسیدگی به بارگذاری پرونده با استفاده از وانیل JavaScript نگاهی دقیق تر خواهیم داشت. هدف این است که به شما یاد دهیم چگونه یک جزء آپلود فایل را بدون نیاز به کتابخانه خارجی بسازید و همچنین برخی از مفاهیم اصلی را در جاوا اسکریپت یاد بگیرید. همچنین یاد خواهید گرفت که چگونه وضعیت پیشرفت یک بارگذاری را همانطور که اتفاق می افتد نشان دهید.
بیایید شروع کنیم، مردم!
راه اندازی پروژه
اول و مهمتر از همه ، در دایرکتوری مورد نظر خود ، یک پوشه جدید برای پروژه ایجاد کنید:
$ mkdir file-upload-progress-bar-javascript
پس از انجام این کار ، اجازه دهید اکنون ایجاد کنیم index.html، main.css، و app.js فایل هایی که در آن تمام نشانه گذاری های پروژه خود را می نویسیم.
$ touch index.html && touch main.css && touch app.js
اکنون می‌توانیم با ایجاد یک الگوی اولیه HTML شروع به ساخت ساختار برای آپلود فایل کنیم <head> و <body> برچسب ها:
<!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;
}
حالا کامپوننت به این شکل است روی مرورگر:
برای افزودن عملکرد مورد نیاز برای آپلود در پروژه خود، اکنون از آن استفاده می کنیم app.js فایل، جایی که کدهای جاوا اسکریپت را می نویسیم که به پروژه ما حیات می بخشد.
موارد زیر را در آن کپی/پیست کنید 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 = `<li class="row">
<i class="fas fa-file-alt"></i>
<div class="content-wrapper">
<div class="details-wrapper">
<span class="name">${name} | <span>Uploading</span></span>
<span class="percent">${fileLoaded}%</span>
</div>
<div class="progress-bar-wrapper">
<div class="progress-wrapper" style="width: ${fileLoaded}%"></div>
</div>
</div>
</li>`;
uploadedContainer.classList.add("onprogress");
progressContainer.innerHTML = progressMarkup;
if (loaded == total) {
progressContainer.innerHTML = "";
let uploadedMarkup = `<li class="row">
<div class="content-wrapper upload">
<i class="fas fa-file-alt"></i>
<div class="details-wrapper">
<span class="name">${name} | <span>Uploaded</span></span>
<span class="file-size">${fileSize}</span>
</div>
</div>
</li>`;
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 برای پروژه.
منابع مربوطه
(برچسب ها برای ترجمه)# html
منتشر شده در 1403-01-05 10:51:03
