Wie kann ich den Datei-Upload-Fortschritt in Echtzeit überwachen, ohne den Server oder Client zu blockieren?

Wie kann ich den Fortschritt eines Datei-Uploads in Echtzeit überwachen, ohne den Server oder Client zu blockieren?

Hintergrund:
Wenn ein Wenn eine Datei hochgeladen wird, kann der Fortschritt des Schreibens der Datei auf den Server verfolgt werden. Dies kann ohne Blockierung des Servers oder Clients erfolgen, was eine reibungslose und effiziente Benutzererfahrung ermöglicht.

Problem:
Die aktuelle Implementierung legt das File-Objekt als Hauptteil eines Abrufs fest Anfrage. Um den Fortschritt jedoch in Echtzeit zu überwachen, ist ein anderer Ansatz erforderlich.

Anforderung:
Anzeige der Dateigröße der Datei, die als Text/Ereignis auf den Server geschrieben wird -Strom. Der Prozess sollte fortgesetzt werden, bis alle als Abfragezeichenfolgenparameter bereitgestellten Bytes geschrieben wurden.

Lösung:

PHP-Implementierung:

<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();
}

JavaScript-Implementierung:

<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>

Das obige ist der detaillierte Inhalt vonWie kann ich den Datei-Upload-Fortschritt in Echtzeit überwachen, ohne den Server oder Client zu blockieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!