Comment lire et faire écho à la taille du fichier téléchargé en temps réel ?

Lire et faire écho à la taille du fichier téléchargé en cours d'écriture en temps réel

Bien que le téléchargement de fichiers soit une tâche courante, il peut être difficile de afficher les informations de progression sans bloquer à la fois le serveur et le client. Cet article explique comment y parvenir en utilisant une combinaison de technologies côté serveur et côté client.

Contexte

Considérez une application dans laquelle les fichiers sont téléchargés sur un serveur à l'aide fetch(), avec le corps défini sur un objet Blob, File, TypedArray ou ArrayBuffer. L'objectif est de lire et de faire écho à la taille du fichier téléchargé en temps réel, afin que le client puisse afficher la progression au fur et à mesure de l'écriture du fichier sur le serveur.

Implémentation côté serveur (par ex. , PHP)

L'implémentation côté serveur implique deux scripts : 'data.php' pour écrire le fichier sur le serveur et 'stream.php' pour diffuser la taille du fichier au client.

data.php :

<code class="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>

stream.php :

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

while(true) {
    $upload = $_GET["filename"];
    $data = filesize($upload);
    if ($data) {
        sendMessage($lastId, $data);
        $lastId++;
    }
}

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

Implémentation côté client ( par exemple, JavaScript)

L'implémentation côté client utilise fetch() pour télécharger le fichier et un EventSource pour recevoir les mises à jour de taille de fichier du serveur.

<code class="javascript">const input = document.querySelector("input[type=file]");
const progress = document.querySelector("progress");
input.addEventListener("change", (event) => {
    const file = input.files[0];
    const request = new Request('data.php', {
        method: "POST",
        headers: { 'x-filename': file.name },
        body: file
    });
    const source = new EventSource('stream.php?filename=' + file.name);
    source.addEventListener("message", (e) => {
        progress.value = e.data;
    }, true);
});</code>

Considérations supplémentaires

Pour gérer les problèmes potentiels d'écriture ou de lecture de fichiers, des mécanismes de gestion des erreurs peuvent être incorporés. De plus, il est important de vider le cache de la taille des fichiers pour garantir des mises à jour précises de la taille des fichiers.

Conclusion

En suivant ces étapes, vous pouvez obtenir une lecture de la taille des fichiers en temps réel. et la mise en écho des fichiers téléchargés, sans bloquer le serveur ou le client. Cela permet un suivi transparent de la progression des téléchargements de fichiers côté client et côté serveur.

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!