يعد تحميل الملفات موجودًا في كل مكان في أي تطبيق ويب، وعندما يتعلق الأمر بتحميل الملفات والموارد عبر الإنترنت (على المتصفح)، يمكن أن تكون الأمور مرهقة إلى حد ما. لحسن الحظ، مع HTML 5، يمكن لعناصر الإدخال التي تأتي عادةً مع التحكم في النموذج للسماح للمستخدمين بتعديل البيانات أن تصبح مفيدة جدًا في تبسيط تحميل الموارد.

في هذه المقالة، سنلقي نظرة فاحصة على كيفية التعامل مع تحميلات الملفات باستخدام Vanilla JavaScript. الهدف هو تعليمك كيفية إنشاء مكون تحميل الملفات دون الحاجة إلى مكتبة خارجية وكذلك تعلم بعض المفاهيم الأساسية في JavaScript. سوف تتعلم أيضًا كيفية إظهار حالة تقدم التحميل فور حدوثه.

كود المصدر: كالعادة، يمكنك التلاعب بكود المصدر المستضاف على GitHub repo للمشروع.

إعداد المشروع

أولاً وقبل كل شيء، في الدليل المفضل لديك، قم بإنشاء مجلد جديد للمشروع:

$ mkdir file-upload-progress-bar-javascript

بعد القيام بذلك، دعونا الآن ننشئ ملفات Index.html وmain.css وapp.js حيث سنكتب جميع العلامات لمشروعنا.

$ touch index.html && touch main.css && touch app.js

الآن يمكننا أن نبدأ في بناء هيكل تحميل الملف عن طريق إنشاء قالب HTML أساسي مع علامات

و:

بعد ذلك، نضيف الأنماط الأساسية للمشروع في main.css:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

لتحسين مظهر تطبيقاتنا، سنستفيد من الرموز الموجودة في مكتبة Font Awesome والتي يمكننا إضافتها إلى مشروعنا من خلال مجموعة التعليمات البرمجية التي يمكن إنشاؤها على الموقع الرسمي لمكتبة Font Awesome.

الآن، تم تحديث ملف Index.html، وتم ربط ملف main.css:

نواصل بناء البنية الخاصة بأداة تحميل الملفات:

  
    
    
    
    
    
    
  
  
    

      
File Uploader JavaScript with Progress
      

        

            
            
            
Browse File to Upload
          
          

            

            

          
      
    
    
  

ثم قم بنسخ/لصق الأكواد التالية لتحديث 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، حيث نكتب أكواد 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 
                          
                          

                            

                              ${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 إلى مشروعنا لمحاكاة نقطة النهاية لإرسال الملفات. والسبب في ذلك هو محاكاة عدم التزامن في مشروعنا حتى نحصل على تأثير تحميل التقدم.

خاتمة

لقد كنت رائعًا للوصول إلى هذه النقطة من هذه المقالة.

تعلمت في هذا البرنامج التعليمي كيفية إنشاء مكون تحميل ملف وإضافة شريط تقدم إليه. يمكن أن يكون هذا مفيدًا عندما تقوم بإنشاء مواقع ويب وتريد أن يشعر المستخدمون بأنهم مشمولون وأن يتعرفوا على مدى بطء أو سرعة تحميل الملف. لا تتردد في إعادة استخدام هذا المشروع وقتما تشاء.

إذا واجهتك مشكلة أثناء متابعة هذا البرنامج التعليمي، أقترح عليك تحميل مشروعك على GitHub للحصول على مساعدة من المطورين الآخرين أو يمكنك أيضًا إرسال رسالة مباشرة لي أيضًا، وسيسعدني تقديم المساعدة.

هذا رابط لمستودع GitHub للمشروع.

الموارد ذات الصلة

• مستندات FontAwesome