Wie kann ich die Dateigröße einer hochgeladenen Datei in Echtzeit lesen und wiedergeben?

Lesen und Echo der Dateigröße der hochgeladenen Datei, die in Echtzeit geschrieben wird

Das Hochladen von Dateien ist zwar eine häufige Aufgabe, kann jedoch eine Herausforderung sein Fortschrittsinformationen anzeigen, ohne sowohl den Server als auch den Client zu blockieren. In diesem Artikel wird erläutert, wie dies mithilfe einer Kombination aus serverseitigen und clientseitigen Technologien erreicht werden kann.

Hintergrund

Stellen Sie sich eine Anwendung vor, bei der Dateien mithilfe von auf einen Server hochgeladen werden fetch(), wobei der Körper auf ein Blob-, File-, TypedArray- oder ArrayBuffer-Objekt festgelegt ist. Ziel ist es, die Dateigröße der hochgeladenen Datei in Echtzeit zu lesen und wiederzugeben, sodass der Client den Fortschritt anzeigen kann, während die Datei auf dem Server geschrieben wird.

Serverseitige Implementierung (z. B. , PHP)

Die serverseitige Implementierung umfasst zwei Skripte: „data.php“ zum Schreiben der Datei auf den Server und „stream.php“ zum Streamen der Dateigröße an den 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>

Clientseitige Implementierung ( (z. B. JavaScript)

Die clientseitige Implementierung verwendet fetch() zum Hochladen der Datei und eine EventSource, um die Aktualisierungen der Dateigröße vom Server zu empfangen.

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

Zusätzliche Überlegungen

Um potenzielle Probleme beim Schreiben oder Lesen von Dateien zu behandeln, können Fehlerbehandlungsmechanismen integriert werden. Darüber hinaus ist es wichtig, den Dateigrößen-Cache zu leeren, um genaue Aktualisierungen der Dateigröße zu gewährleisten.

Fazit

Durch Befolgen dieser Schritte können Sie die Dateigröße in Echtzeit ablesen und Echo hochgeladener Dateien, ohne den Server oder Client zu blockieren. Dies ermöglicht eine nahtlose Fortschrittsverfolgung für Datei-Uploads sowohl auf der Client- als auch auf der Serverseite.

Das obige ist der detaillierte Inhalt vonWie kann ich die Dateigröße einer hochgeladenen Datei in Echtzeit lesen und wiedergeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!