答案：通过HTML5的File API、FormData和XMLHttpRequest实现文件上传与进度显示。1. 使用input标签选择文件，添加进度条和状态提示；2. JavaScript读取文件并用FormData封装，通过XMLHttpRequest发送，利用xhr.upload.onprogress监听上传进度，动态更新进度条；3. 后端使用Node.js的Express和multer接收multipart/form-data格式文件，保存至指定目录；4. 扩展支持多文件上传、取消、错误处理及文件大小类型限制，提升用户体验。前后端协同确保上传流畅、反馈及时。
实现HTML在线文件上传并显示上传进度，核心依赖于HTML5的File API、FormData对象和XMLHttpRequest（或Fetch API）结合后端服务完成。整个流程包括前端选择文件、构造请求、发送数据以及监听上传过程中的进度事件。
1. 基础HTML结构与文件选择
使用input标签允许用户选择文件，并添加一个用于显示进度的元素：
<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>
通过type="file"触发系统文件选择框，用户选定后可获取文件对象。
2. 使用JavaScript读取文件并提交
利用File API访问选中的文件，通过FormData封装数据，再用XMLHttpRequest发送到服务器：
立即学习“前端免费学习笔记（深入）”；
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>关键点在于xhr.upload.onprogress事件，它能实时返回已传输字节数和总字节数，从而计算出进度百分比。
3. 后端接收文件（以Node.js为例）
前端发来的文件需由后端接口处理。以下是一个基于Express和multer的简单示例：
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>确保服务器创建了uploads目录用于保存文件。该配置支持接收multipart/form-data格式的数据。
4. 提升体验：支持多文件与错误处理
可以扩展功能支持多文件上传，同时增加网络异常、取消上传等处理逻辑：
- 将input设置为multiple="multiple"，遍历files数组逐个上传
- 使用xhr.abort()实现取消上传
- 添加onerror和ontimeout事件处理网络问题
- 限制文件类型和大小（如file.size > 10MB则提示）
基本上就这些。只要前后端配合良好，HTML实现带进度的文件上传并不复杂，但细节决定用户体验。重点关注进度反馈的平滑性、错误提示的明确性和兼容性处理。
