アップロードされたファイルのファイルサイズをリアルタイムで読み取り、エコーする方法は?

書き込み中のアップロードされたファイルのファイル サイズをリアルタイムで読み取り、エコーする

ファイルのアップロードは一般的なタスクですが、サーバーとクライアントの両方をブロックせずに進行状況情報を表示します。この記事では、サーバー側とクライアント側のテクノロジーを組み合わせてこれを実現する方法について説明します。

バックグラウンド

を使用してファイルがサーバーにアップロードされるアプリケーションを考えてみましょう。 fetch()。本体は Blob、File、TypedArray、または ArrayBuffer オブジェクトに設定されます。目的は、アップロードされたファイルのファイル サイズをリアルタイムで読み取ってエコーし、ファイルがサーバーに書き込まれているときにクライアントが進行状況を表示できるようにすることです。

サーバー側の実装 (例: 、PHP)

サーバー側の実装には、サーバーにファイルを書き込むための「data.php」と、クライアントにファイル サイズをストリーミングするための「stream.php」という 2 つのスクリプトが含まれます。

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 中国語 Web サイトの他の関連記事を参照してください。