如何实时读取并回显上传文件的文件大小？

实时读取并回显正在写入的上传文件的文件大小

虽然文件上传是一项常见任务，但它可能具有挑战性显示进度信息而不阻塞服务器和客户端。本文讨论如何结合使用服务器端和客户端技术来实现此目的。

背景

考虑一个应用程序，其中使用以下命令将文件上传到服务器fetch()，主体设置为 Blob、File、TypedArray 或 ArrayBuffer 对象。目标是实时读取并回显上传文件的文件大小，以便客户端可以在服务器上写入文件时显示进度。

服务器端实现（例如, PHP)

服务器端实现涉及两个脚本：“data.php”用于将文件写入服务器，“stream.php”用于将文件大小流式传输到客户端。

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>

客户端实现 (例如，JavaScript）

客户端实现使用 fetch() 上传文件，并使用 EventSource 从服务器接收文件大小更新。

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

其他注意事项

为了处理文件写入或读取的潜在问题，可以合并错误处理机制。此外，清除文件大小缓存以确保准确的文件大小更新也很重要。

结论

按照以下步骤，您可以实现实时文件大小读取并回显上传的文件，而不会阻塞服务器或客户端。这可以在客户端和服务器端实现文件上传的无缝进度跟踪。

以上是如何实时读取并回显上传文件的文件大小？的详细内容。更多信息请关注PHP中文网其他相关文章！