Bagaimana untuk Membaca dan Gema Saiz Fail Fail yang Dimuat Naik dalam Masa Nyata?

Baca dan Gemakan Saiz Fail yang Dimuat Naik Ditulis dalam Masa Nyata

Walaupun muat naik fail adalah tugas biasa, ia mungkin mencabar untuk memaparkan maklumat kemajuan tanpa menyekat kedua-dua pelayan dan pelanggan. Artikel ini membincangkan cara untuk mencapai matlamat ini menggunakan gabungan teknologi sisi pelayan dan sisi klien.

Latar Belakang

Pertimbangkan aplikasi di mana fail dimuat naik ke pelayan menggunakan fetch(), dengan badan ditetapkan kepada objek Blob, Fail, TypedArray atau ArrayBuffer. Matlamatnya adalah untuk membaca dan menggemakan saiz fail fail yang dimuat naik dalam masa nyata, supaya klien boleh memaparkan kemajuan semasa fail sedang ditulis pada pelayan.

Pelaksanaan Bahagian Pelayan (cth. , PHP)

Pelaksanaan bahagian pelayan melibatkan dua skrip: 'data.php' untuk menulis fail ke pelayan dan 'stream.php' untuk menstrim saiz fail kepada klien.

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>

Pelaksanaan Sebelah Pelanggan ( cth., JavaScript)

Pelaksanaan pihak klien menggunakan fetch() untuk memuat naik fail dan EventSource untuk menerima kemas kini saiz fail daripada pelayan.

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

Pertimbangan Tambahan

Untuk mengendalikan isu yang berpotensi dengan penulisan atau pembacaan fail, mekanisme pengendalian ralat boleh digabungkan. Selain itu, adalah penting untuk mengosongkan cache saiz fail untuk memastikan kemas kini saiz fail yang tepat.

Kesimpulan

Dengan mengikuti langkah ini, anda boleh mencapai bacaan saiz fail masa nyata dan bergema fail yang dimuat naik, tanpa menyekat pelayan atau klien. Ini membolehkan penjejakan kemajuan yang lancar untuk muat naik fail pada kedua-dua bahagian klien dan pelayan.

Atas ialah kandungan terperinci Bagaimana untuk Membaca dan Gema Saiz Fail Fail yang Dimuat Naik dalam Masa Nyata?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!