Wie kann die Dateigröße hochgeladener Dateien in Echtzeit überwacht und wiedergegeben werden, während Server- und Clientblockierungen verhindert werden?

Dateigröße hochgeladener Dateien in Echtzeit lesen und anzeigen

Problem:

Wie die Dateigröße einer hochgeladenen Datei, die auf den Server geschrieben wird, in Echtzeit lesen und wiedergeben, ohne sowohl den Server als auch den Client zu blockieren?

Lösung:

Server (z. B. PHP):

1. data.php: Datei-Upload verarbeiten und im Dateisystem speichern.

<code class="php"><?php
$filename = $_SERVER["HTTP_X_FILENAME"];
$input = fopen("php://input", "rb");
$file = fopen($filename, "wb");
stream_copy_to_stream($input, $file);
fclose($input);
fclose($file);
echo "upload of " . $filename . " successful";
?></code>

2. stream.php: Überwachen Sie die Dateigröße und senden Sie Aktualisierungen über Server-Sent Events (SSE) an den Client.

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

$filename = $_GET["filename"];
$filesize = $_GET["filesize"];

clearstatcache(true, $filename);
$data = filesize($filename);
while ($data < $filesize) {
    sendMessage($data);
    clearstatcache(true, $filename);
    $data = filesize($filename);
    usleep(20000);
}

function sendMessage($data) {
    echo "data: $data\n\n";
    flush();
}
?></code>

Client (z. B. JavaScript):

1. Datei-Upload und -Fortschritt verarbeiten:

<code class="javascript">const handleFile = (event) => {
  const [file] = input.files;

  const headers = new Headers();
  headers.append("x-filename", file.name);

  const request = new Request("data.php", {
    method: "POST",
    headers: headers,
    body: file,
  });

  fetch(request);
  startSSE(file.name, file.size);
};</code>

2. SSE initialisieren und Update-Fortschritt:

<code class="javascript">function startSSE(filename, filesize) {
  const source = new EventSource(`stream.php?filename=${filename}&filesize=${filesize}`);

  source.addEventListener("message", (e) => {
    const data = parseInt(e.data);
    progress.value = data;
  });
}</code>

Sicherheitsüberlegungen:

1. Implementieren Sie eine ordnungsgemäße Bereinigung und Validierung, um Schwachstellen beim Hochladen von Dateien zu verhindern.
2. Beschränken Sie den Zugriff auf vertrauliche Dateien oder Informationen.

Das obige ist der detaillierte Inhalt vonWie kann die Dateigröße hochgeladener Dateien in Echtzeit überwacht und wiedergegeben werden, während Server- und Clientblockierungen verhindert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!