업로드된 파일의 파일 크기를 실시간으로 읽고 에코하는 방법은 무엇입니까?

실시간으로 작성되는 업로드된 파일의 읽기 및 에코 파일 크기

파일 업로드는 일반적인 작업이지만, 서버와 클라이언트를 모두 차단하지 않고 진행 정보를 표시합니다. 이 문서에서는 서버 측 기술과 클라이언트 측 기술의 조합을 사용하여 이를 달성하는 방법에 대해 설명합니다.

배경

다음을 사용하여 서버에 파일을 업로드하는 애플리케이션을 고려해 보세요. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!