サーバーとクライアントのブロックを防ぎながら、アップロードされたファイルのファイル サイズをリアルタイムで監視してエコーする方法

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

問題:

方法サーバーとクライアントの両方をブロックせずに、サーバーに書き込まれるアップロードされたファイルのファイル サイズをリアルタイムで読み取ってエコーするには?

解決策:

Server (例: PHP):

1. data.php: ファイルのアップロードを処理し、ファイル システムに保存します。

<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: ファイル サイズを監視し、Server-Sent Events (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 (例: JavaScript):

1. ファイルのアップロードと進行状況の処理:

<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. SSE の初期化と更新の進行状況:

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

セキュリティに関する考慮事項:

1. ファイル アップロードの脆弱性を防ぐために、適切なサニタイズと検証を実装します。
2. 機密ファイルまたは情報へのアクセスを制限します。

以上がサーバーとクライアントのブロックを防ぎながら、アップロードされたファイルのファイル サイズをリアルタイムで監視してエコーする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。