Comment surveiller et faire écho à la taille des fichiers téléchargés en temps réel tout en empêchant le blocage du serveur et du client ?

Lecture et écho de la taille des fichiers téléchargés en temps réel

Problème :

Comment lire et faire écho à la taille d'un fichier téléchargé en cours d'écriture sur le serveur en temps réel sans bloquer à la fois le serveur et le client ?

Solution :

Serveur (par exemple, PHP) :

1. data.php : Gérer le téléchargement de fichiers et l'enregistrer dans le système de fichiers.

<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 : Surveillez la taille du fichier et envoyez les mises à jour au client via les événements envoyés par le serveur (SSE).

<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 (par exemple, JavaScript) :

1. Gérer le téléchargement et la progression des fichiers :

<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. Initialiser SSE et Progression de la mise à jour :

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

Considérations de sécurité :

1. Mettre en œuvre une désinfection et une validation appropriées pour éviter les vulnérabilités liées au téléchargement de fichiers.
2. Limiter l'accès aux fichiers ou informations sensibles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!