Bagaimanakah Saya Boleh Memantau Kemajuan Muat Naik Fail Masa Nyata Tanpa Menyekat Pelayan atau Pelanggan?

Bagaimana untuk memantau kemajuan muat naik fail dalam masa nyata tanpa menyekat pelayan atau klien?

Latar Belakang:
Apabila muat naik fail berlaku, kemajuan fail yang ditulis ke pelayan boleh dijejaki. Ini boleh dilakukan tanpa menyekat pelayan atau pelanggan, membolehkan pengalaman pengguna yang lancar dan cekap.

Masalah:
Pelaksanaan semasa menetapkan objek Fail sebagai badan pengambilan permintaan. Walau bagaimanapun, untuk memantau kemajuan dalam masa nyata, pendekatan berbeza diperlukan.

Keperluan:
Paparkan saiz fail fail yang sedang ditulis ke pelayan sebagai teks/acara -strim. Proses harus diteruskan sehingga semua bait yang disediakan sebagai parameter rentetan pertanyaan telah ditulis.

Penyelesaian:

Pelaksanaan PHP:

<code class="php">// stream.php
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
header("Connection: keep-alive");

$lastId = isset($_SERVER["HTTP_LAST_EVENT_ID"]) ? intval($_SERVER["HTTP_LAST_EVENT_ID"]) : 0;
$upload = $_GET["filename"];
$data = 0;
// Ignore file size if it's already there
$wasLess = $lastId != 0;
while ($data < $_GET["filesize"] || !$wasLess) {
    clearstatcache(true, $upload);
    $data = filesize($upload);
    $wasLess |= $data < $_GET["filesize"];
    if ($wasLess) {
        sendMessage($lastId, $data);
        $lastId++;
    }
    usleep(20000);
}

function sendMessage($id, $data)
{
    echo "id: $id\n";
    echo "data: $data\n\n";
    ob_flush();
}

Pelaksanaan JavaScript:

<code class="javascript">const [url, stream, header] = ["data.php", "stream.php", "x-filename"];

input.addEventListener("change", (event) => {
  const [file] = input.files;
  const [{ size: filesize, name: filename }, headers, params] = [file, new Headers(), new URLSearchParams()];

  headers.append(header, filename);
  progress.value = 0;
  progress.max = filesize;
  const [request, source] = [
    new Request(url, { method: "POST", headers, body: file }),
    new EventSource(`${stream}?${params.toString()}`)
  ];

  source.addEventListener("message", (e) => {
    progress.value = e.data;
    // Close the source when the data equals the filesize
    if (e.data == filesize) {
      source.close();
    }
  });
  fetch(request);
});</code>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memantau Kemajuan Muat Naik Fail Masa Nyata Tanpa Menyekat Pelayan atau Pelanggan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!