كيف نعمل شريط التقدم عند رفع الملفات جافا سكربت و php

اظن ان هذا ما تبحث عنه:

$.ajax({
  xhr: function() {
    var xhr = new window.XMLHttpRequest();

    xhr.upload.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        percentComplete = parseInt(percentComplete * 100);
        console.log(percentComplete);

        if (percentComplete === 100) {
        }
      }
    }, false);

    return xhr;
  },
  url: posturlfile,
  type: "POST",
  data: JSON.stringify(fileuploaddata),
  contentType: "application/json",
  dataType: "json",
  success: function(result) {
    console.log(result);
  }
});

المصدر

يمكنك استعمال شريط بوتستراب الذي قمت بارفاقه لعمل فكرة شريط تقدم عن طريق استهداف الحدث progress المرفق بطلب أجاكس الخاص بك.

// تعريف طلب الاجاكس الخاص بك
var ajax = new XMLHttpRequest();

// لعرض البيانات مثلا onreadystatechange  استهداف الحدث 
ajax.onreadystatechange = function () {

    if (ajax.status) {

        if (ajax.status == 200 && (ajax.readyState == 4)){
            // الطلب ناجح بيانات الرد جاهزة
        }
    }
}

// الذي يتم استهدافه اثناء القيام بالطلبprogress ارفاق الطلب بالحدث 
ajax.upload.addEventListener("progress", function (event) 
// لاستعمال متغيراته في تحريكنا لشريط التنقل event لاحظ استقبالنا للكائن 
{

    var percent = (event.loaded / event.total) * 100;
   
    console.log(percent); 
    //  يعبر هذا عن النسبة المئوية لتقدم الطلب
    // يمكنك استعراض هاته القيم في الطرفية 

});

// ارسال الطلب 
ajax.open("POST", 'your_uploading_link.php', true);
ajax.send(formData);

يمكنك استعمال القيمة المحصل عليها في المتغير percent لتغيير عرض شريط التقدم ليعبر عن تقدم الطلب.

لنقم مثلا باستدعاء الدالة setBarWidth التي تستقبل معاملا width وتقوم باسناده كعرض لعنصر الشريط كالتالي:

function setBarWidth(width){
    document.querySelector('#bar-id').style.width = width + '%'; 
}

ثم سيسهل استدعاء الدالة من داخل الحدث progress كالتالي:

{

    var percent = (event.loaded / event.total) * 100;
   
    console.log(percent); 
    setBarWidth(percent);
    //  يعبر هذا عن النسبة المئوية لتقدم الطلب
    // يمكنك استعراض هاته القيم في الطرفية 

});