首先通过File API获取本地文件，再利用FormData发送至服务器。具体步骤：1. 用input选择文件；2. FileReader读取内容用于预览或校验；3. 将文件加入FormData并用fetch上传；4. 注意限制类型大小、支持多选、显示进度及服务端安全验证。合理封装可提升体验与复用性。
HTML5 提供了强大的文件操作能力，通过 File API 和 FormData，开发者可以在网页中实现本地文件读取与上传功能，无需依赖插件。下面介绍如何使用这些技术完成文件上传，并分享一些实用技巧。
1. 基本文件上传结构
首先，在 HTML 中创建一个文件输入控件和上传按钮：
<input type="file" id="fileInput" /><button onclick="uploadFile()">上传文件</button>
用户选择文件后，JavaScript 可以通过 File API 获取文件对象。
2. 使用 FileReader 读取文件内容
FileReader 接口允许异步读取文件内容，常用于预览图片或校验文件类型：
立即学习“前端免费学习笔记（深入）”；
function previewFile() {const file = document.getElementById('fileInput').files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(e) {
const dataUrl = e.target.result;
console.log('文件数据:', dataUrl);
};
reader.readAsDataURL(file); // 读取为 base64
}
readAsText() 可用于文本文件，readAsArrayBuffer() 适合二进制文件处理。
3. 使用 FormData 实现文件上传
将文件添加到 FormData 对象，再通过 XMLHttpRequest 或 fetch 发送到服务器：
function uploadFile() {const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
if (!file) {
alert('请选择文件');
return;
}
const formData = new FormData();
formData.append('uploadFile', file);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log('上传成功:', data);
})
.catch(error => {
console.error('上传失败:', error);
});
}
服务端需配置接收 multipart/form-data 类型的接口。
4. 实用技巧与注意事项
提升用户体验和程序健壮性的一些常用做法：
- 限制文件类型：在 input 上使用 accept 属性，如 accept=".jpg,.png"，结合 JS 校验 file.type
- 限制文件大小：检查 file.size（单位字节），避免上传过大文件
- 支持多文件上传：添加 multiple 属性，遍历 files 数组批量处理
- 显示上传进度：监听 xhr.upload.onprogress 事件，更新进度条
- 安全考虑：不要完全信任前端校验，服务端必须重新验证文件类型和内容
基本上就这些。HTML5 的文件 API 让网页具备接近原生应用的文件处理能力，合理使用可大幅提升交互体验。不复杂但容易忽略的是细节处理，比如错误捕获和用户反馈。建议结合实际场景封装上传逻辑，提高代码复用性。
