يعد تحميل الملفات موجودًا في كل مكان في أي تطبيق ويب، وعندما يتعلق الأمر بتحميل الملفات والموارد عبر الإنترنت (على المتصفح)، فقد تكون الأمور مرهقة إلى حد ما. لحسن الحظ، مع HTML 5، يمكن لعناصر الإدخال التي تأتي عادةً مع التحكم في النموذج للسماح للمستخدمين بتعديل البيانات أن تصبح مفيدة جدًا في تبسيط تحميل الموارد.
في هذه المقالة، سنلقي نظرة فاحصة على كيفية التعامل مع تحميلات الملفات باستخدام Vanilla 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;
}
لتحسين مظهر تطبيقاتنا، سنستفيد من الرموز الموجودة في مكتبة Font Awesome والتي يمكننا إضافتها إلى مشروعنا من خلال مجموعة التعليمات البرمجية التي يمكن إنشاؤها على الموقع الرسمي لمكتبة Font 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 ، مع أفضل الممارسات ، والمعايير المقبولة في الصناعة ، وورقة الغش المضمنة. توقف عن أوامر Googling Git وفي الواقع تعلم ذلك!
لإضافة الوظيفة المطلوبة للتحميل في مشروعنا، نستخدم الآن 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 = `
${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 للحصول على مساعدة من المطورين الآخرين أو يمكنك أيضًا إرسال رسالة مباشرة أيضًا.
هنا هو وجود صلة إلى جيثب ريبو للمشروع.
