Bagaimana untuk melaksanakan fungsi muat naik fail dengan bar kemajuan dalam JavaScript?-tutorial js-php.cn

Bagaimana untuk melaksanakan fungsi muat naik fail dengan bar kemajuan dalam JavaScript?

WBOY

Lepaskan： 2023-10-21 10:07:47

asal

773 orang telah melayarinya

JavaScript 如何实现带进度条的文件上传功能？

Bagaimana untuk melaksanakan fungsi muat naik fail dengan bar kemajuan dalam JavaScript?

Dalam pembangunan web moden, muat naik fail adalah operasi biasa. Untuk meningkatkan pengalaman pengguna, adalah sangat perlu untuk menambah fungsi muat naik fail dengan bar kemajuan. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi muat naik fail dengan bar kemajuan dan memberikan contoh kod khusus.

1. Reka letak halaman hujung hadapan

Pertama, kita perlu membina reka letak yang merangkumi butang pemilihan fail, bar kemajuan dan butang muat naik pada halaman hujung hadapan.

<!DOCTYPE html>
<html>
<head>
    <title>带进度条的文件上传</title>
</head>
<body>
    <h1>带进度条的文件上传</h1>
    <input type="file" id="fileInput">
    <progress id="progressBar" value="0" max="100"></progress>
    <button onclick="uploadFile()">上传</button>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami menggunakan elemen untuk membuat butang pemilihan fail, elemen untuk mencipta bar kemajuan dan butang untuk mencetuskan operasi muat naik.

2. JavaScript melaksanakan fungsi muat naik

Seterusnya, kami menggunakan JavaScript untuk melaksanakan fungsi muat naik fail dan mengemas kini bar kemajuan dalam masa nyata semasa proses muat naik.

function uploadFile() {
    var fileInput = document.getElementById("fileInput");
    var file = fileInput.files[0];
    
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/upload", true);

    xhr.upload.addEventListener("progress", function(e) {
        if (e.lengthComputable) {
            var percentComplete = Math.round((e.loaded / e.total) * 100);
            var progressBar = document.getElementById("progressBar");
            progressBar.value = percentComplete;
        }
    }, false);

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log("上传完成");
        }
    };

    xhr.send(file);
}

Salin selepas log masuk

Dalam kod di atas, kita mula-mula mendapatkan elemen butang pemilihan fail dan mendapatkan fail yang dipilih. Kami kemudian membuat objek XMLHttpRequest dan menentukan URL untuk permintaan POST. Di sini, anda perlu menukarnya kepada alamat antara muka belakang anda sendiri mengikut situasi sebenar.

Seterusnya, kami mendengar peristiwa kemajuan semasa proses muat naik, mengira peratusan muat naik dan mengemas kini nilai bar kemajuan setiap kali kemajuan dikemas kini.

Apabila readyState permintaan berubah kepada 4 (permintaan selesai) dan status adalah 200 (permintaan berjaya), kami boleh menentukan bahawa muat naik fail telah selesai.

3. Pemprosesan bahagian belakang muat naik fail

Kod di atas hanya mengendalikan logik muat naik fail di bahagian hadapan, dan pemprosesan yang sepadan perlu dilakukan di bahagian belakang. Di sini kami mengambil Node.js sebagai contoh, menggunakan rangka kerja Express untuk mengendalikan permintaan muat naik fail dan menyimpan fail ke pelayan.

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), function (req, res, next) {
    // 文件上传成功后的处理逻辑
    console.log(req.file);
});

Salin selepas log masuk

Dalam kod ini, kami mula-mula memperkenalkan modul Express dan multer, dan menggunakan perisian tengah multer untuk mengendalikan permintaan muat naik fail. multer mengkonfigurasi direktori sasaran untuk muat naik fail menjadi "muat naik/", dan menggunakan upload.single('fail') untuk menerima fail bernama "fail".

Selepas fail berjaya dimuat naik, anda boleh mencetak objek req.file pada konsol Objek ini mengandungi maklumat yang berkaitan tentang fail yang dimuat naik, seperti nama fail, saiz fail, dsb.

4. Ringkasan

Melalui contoh kod di atas, kami berjaya melaksanakan fungsi muat naik fail dengan bar kemajuan. Di bahagian hadapan, JavaScript digunakan untuk memantau peristiwa kemajuan semasa proses muat naik dan mengemas kini nilai bar kemajuan dalam masa nyata. Di bahagian belakang, permintaan muat naik fail diproses melalui rangka kerja Ekspres dan perisian tengah multifungsi, dan fail disimpan ke pelayan.

Jika anda perlu menggunakannya dalam projek sebenar, sila ubah suai kod mengikut situasi sebenar. Saya harap artikel ini dapat membantu anda melaksanakan fungsi muat naik fail yang pantas dan mudah.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi muat naik fail dengan bar kemajuan dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!