使用input[file]获取文件，通过FormData和fetch/XHR上传；2. 支持多文件需添加multiple属性并校验类型；3. 大文件上传可用XHR监听progress事件实现进度条；4. 安全上须服务端校验文件类型与大小，防范溢出与隐私泄露，处理跨域与错误重试。
JavaScript 实现文件上传功能，核心是通过 HTML 的 input[type="file"] 获取用户选择的文件，再利用 FormData 和 XMLHttpRequest 或 fetch API 将文件发送到服务器。现代前端开发中，这项功能非常常见，比如头像上传、附件提交等场景。
1. 基础文件上传实现步骤
要完成一个基本的文件上传，可以按照以下流程操作：
- 在页面中添加文件输入控件：<input type="file" id="fileInput">
- 监听文件选择事件，获取选中的文件对象
- 使用 FormData 构造请求数据
- 通过 fetch 或 XMLHttpRequest 发送到后端接口
示例代码：
const fileInput = document.getElementById('fileInput');fileInput.addEventListener('change', function() {
const file = this.files[0];
if (!file) return;
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));
});
2. 多文件上传与类型限制
支持多文件上传只需在 input 标签中添加 multiple 属性，并遍历 files 数组即可。
立即学习“Java免费学习笔记（深入）”；
<input type="file" id="fileInput" multiple>同时，可以通过 accept 属性限制文件类型，提升用户体验：
<input type="file" accept=".jpg,.png,.pdf" multiple>JavaScript 中也可以做进一步校验：
const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];
for (let file of fileInput.files) {
if (!allowedTypes.includes(file.type)) {
alert(`不支持的文件类型: ${file.name}`);
continue;
}
// 添加到 formData 并上传
}
3. 上传进度监听与用户体验优化
大文件上传时，显示进度条能显著提升体验。fetch 不支持直接监听上传进度，需改用 XMLHttpRequest。
示例：监听上传进度
const xhr = new XMLHttpRequest();xhr.upload.addEventListener('progress', e => {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
console.log(`上传进度: ${percent.toFixed(2)}%`);
}
});
xhr.open('POST', '/api/upload');
xhr.send(formData);
可将进度值绑定到页面上的进度条元素，实现可视化。
4. 安全与注意事项
前端上传虽方便，但存在一些关键注意事项：
- 不要仅依赖前端校验：文件类型、大小限制必须在服务端再次验证，防止绕过
- 限制文件大小避免内存溢出：
if (file.size > 10 * 1024 * 1024) { alert('文件不能超过10MB'); } - 敏感信息保护：避免上传包含隐私的文件路径（现代浏览器已隐藏真实路径）
- 跨域问题：确保后端正确配置 CORS，允许前端域名请求
- 错误处理：网络中断、服务异常等情况应提示用户并提供重试机制
基本上就这些。文件上传看似简单，但涉及交互、性能和安全多个层面。合理使用原生 API，结合必要的校验和反馈，就能实现稳定可靠的上传功能。
