서버 및 클라이언트 차단을 방지하면서 업로드된 파일의 파일 크기를 실시간으로 모니터링하고 에코하는 방법은 무엇입니까?

업로드된 파일의 파일 크기를 실시간으로 읽고 에코하는 방법

문제:

방법 서버와 클라이언트를 모두 차단하지 않고 실시간으로 서버에 기록되는 업로드된 파일의 파일 크기를 읽고 에코하려면?

해결책:

서버(예: 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: 파일 크기를 모니터링하고 SSE(Server-Sent Events)를 통해 업데이트를 클라이언트에 반영합니다.

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

클라이언트 (예: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!