答案：使用HTML input type="file"选择文件，通过JavaScript监听change事件获取FileList，利用FormData结合fetch或XMLHttpRequest异步上传，后端需支持multipart/form-data解析并配置CORS。
要在网页中实现文件上传功能，HTML 提供了 input type="file" 控件，结合 JavaScript 和 AJAX 可以实现无刷新上传。下面详细介绍如何使用。
添加文件上传控件（HTML）
在 HTML 中插入文件选择框非常简单，只需使用 input 标签并设置 type="file"：
你可以通过以下属性进一步控制行为：
-
multiple：允许选择多个文件 ——
multiple -
accept：限制文件类型，如只选图片 ——
accept="image/*" -
capture：调用摄像头（移动端）——
capture="environment"
示例：
立即学习“前端免费学习笔记（深入）”；
获取用户选择的文件（JavaScript）
通过监听 change 事件，可以读取用户选中的文件列表：
document.getElementById('fileInput').addEventListener('change', function(e) {
const files = e.target.files; // FileList 对象
if (files.length > 0) {
console.log('已选择文件:', files[0].name);
}
});
FileList 是类数组对象，每个 File 对象包含文件名、大小、类型等信息。
使用 AJAX 实现异步上传（FormData + XMLHttpRequest 或 Fetch）
要实现无刷新上传，需将文件数据封装进 FormData，再通过 AJAX 发送到服务器。
示例：使用 fetch 上传单个文件
const uploadFile = (file) => {
const formData = new FormData();
formData.append('uploadFile', file); // 字段名对应后端接收名
fetch('/api/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log('上传成功:', data);
})
.catch(error => {
console.error('上传失败:', error);
});
};
// 调用上传
document.getElementById('fileInput').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
uploadFile(file);
}
});
若允许多选，可遍历所有文件：
for (let i = 0; i < files.length; i++) {
uploadFile(files[i]);
}
服务器端接收注意事项
AJAX 上传发送的是 multipart/form-data 格式，后端需正确解析。常见语言处理方式：
- Node.js（Express + Multer）：使用 multer 中间件处理文件上传
-
PHP：通过
$_FILES['uploadFile']获取文件 - Python（Flask/Django）：从 request.files 中读取
确保接口路径（如 '/api/upload'）与后端路由一致，并配置好跨域（CORS）策略（开发时尤其注意）。
基本上就这些。HTML 提供基础控件，JavaScript 控制交互和上传逻辑，AJAX 实现异步提交，整个流程清晰且兼容现代浏览器。
