<input type="file" id="fileInput" />
<button onclick="uploadFile()">上传</button>
<div id="progressBar" style="width: 100%; border: 1px solid #ccc;">
  <div id="progress" style="width: 0%; height: 20px; background: green;"></div>
</div>
<p id="status">未开始</p>

function uploadFile() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  if (!file) {
    alert("请选择文件");
    return;
  }
<p>const formData = new FormData();
formData.append('uploaded_file', file);</p><p>const xhr = new XMLHttpRequest();</p><p>// 监听上传进度
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
document.getElementById('progress').style.width = percent + '%';
document.getElementById('status').innerText = '上传中: ' + Math.round(percent) + '%';
}
};</p><p>// 上传完成
xhr.onload = function() {
if (xhr.status === 200) {
document.getElementById('status').innerText = '上传成功';
} else {
document.getElementById('status').innerText = '上传失败';
}
};</p><p>// 开始上传
xhr.open('POST', '/upload', true);
xhr.send(formData);
}</p>

const express = require('express');
const multer = require('multer');
const app = express();
<p>// 配置存储路径和文件名
const storage = multer.diskStorage({
destination: './uploads/',
filename: (req, file, cb) => {
cb(null, Date.now() + '-' + file.originalname);
}
});</p><p>const upload = multer({ storage }).single('uploaded_file');</p><p>app.post('/upload', (req, res) => {
upload(req, res, function(err) {
if (err) {
return res.status(500).json({ error: err.message });
}
res.json({ message: '文件上传成功' });
});
});</p><p>app.listen(3000, () => console.log('服务运行在端口3000'));</p>