Rumah > Artikel > hujung hadapan web > Bagaimana untuk melaksanakan fungsi muat naik fail dengan bar kemajuan dalam JavaScript?
Bagaimana untuk melaksanakan fungsi muat naik fail dengan bar kemajuan dalam JavaScript?
- WBOYasal
- 2023-10-21 10:07:47640semak imbas
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>Dalam kod di atas, kami menggunakan elemen 3525558f8f338d4ea90ebf22e5cde2bc untuk membuat butang pemilihan fail, elemen 6ecb87e5318a36c03c59e25d55f43372 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);
}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);
});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!