Bagaimana untuk Memaparkan Kemajuan Muat Naik Fail AJAX dalam Elemen Kemajuan?

Cara Memaparkan Kemajuan Muat Naik Fail AJAX dalam Elemen Kemajuan

Apabila memuat naik fail melalui skrip AJAX, anda mungkin menghadapi keperluan untuk memaparkan kemajuannya kepada pengguna. Terutamanya apabila proses muat naik mengambil masa yang lama. Untuk memaparkan kemajuan ini dengan berkesan, adalah disyorkan untuk mengemas kini elemen kemajuan HTML pada bahagian hadapan.

PENYELESAIAN:

Untuk mencapai ini, sifat kemajuan kelas pelaksana boleh dimanfaatkan. Sifat ini harus sentiasa dikemas kini semasa proses muat naik, memberikan kemajuan semasa sebagai peratusan (dari 1-100). Kaedah get_progress() juga boleh digunakan untuk mendapatkan semula kemajuan ini.

Untuk memaparkan kemajuan pada bahagian hadapan, adalah penting untuk mewujudkan mekanisme untuk mengakses sifat kemajuan kelas pelaksana daripada bahagian hadapan. Coretan kod berikut memberikan contoh cara ini boleh dicapai menggunakan JavaScript:

function updateProgress() {
  // Send an AJAX request to retrieve the current progress from the PHP script
  $.ajax({
    url: "php/progress.php",
    success: function(response) {
      // Update the progress element with the received progress percentage
      $("#progress").val(response);
    }
  });
  
  // Recursively call this function to continuously update the progress
  setTimeout(updateProgress, 100);
}

$(document).ready(function() {
  updateProgress();
});

Dalam kod ini, fungsi updateProgress() menghantar permintaan AJAX kepada skrip PHP, yang mengembalikan kemajuan semasa sebagai tindak balas. Respons kemudiannya digunakan untuk mengemas kini elemen kemajuan dengan ID "kemajuan" pada bahagian hadapan. Fungsi ini juga ditetapkan untuk dipanggil secara rekursif setiap 100 milisaat untuk mengemas kini kemajuan secara berterusan. Ini mewujudkan paparan masa nyata kemajuan muat naik untuk pengguna.

Dengan melaksanakan penyelesaian ini, anda boleh menunjukkan kemajuan muat naik dengan berkesan dalam elemen kemajuan pada bahagian hadapan. Ini meningkatkan pengalaman pengguna dengan memberikan maklum balas visual tentang status proses muat naik.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Kemajuan Muat Naik Fail AJAX dalam Elemen Kemajuan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!