html5怎么实现文件上传_HTML5文件API与FormData上传

蓮花仙者 2025-10-20 00:00:00 次阅读

HTML5通过File API和FormData实现文件上传，首先利用input选择文件，再用FileReader读取并预览图片，接着将文件添加到FormData对象中，最后通过XMLHttpRequest发送请求，支持进度监控与多字段提交，实现高效前端文件操作。

HTML5 提供了强大的文件操作能力，通过 File API 和 FormData，我们可以轻松实现前端文件选择、预览以及上传功能。这种方式无需依赖 Flash 或其他插件，兼容现代浏览器，是目前主流的文件上传方案。

使用 File API 获取本地文件

File API 允许网页访问用户本地文件，主要通过 input[type=file] 和 JavaScript 的 FileReader 对象来实现。

示例：获取用户选择的文件

你可以通过 FileReader 实现图片预览：

const reader = new FileReader();
reader.onload = function(e) {
  const preview = document.createElement('img');
  preview.src = e.target.result;
  document.body.appendChild(preview);
};
reader.readAsDataURL(file);

使用 FormData 构建上传数据

FormData 是 HTML5 提供的一个对象，用于模拟表单数据，特别适合异步上传文件。

它可以自动处理 MIME 类型，并支持多文件上传。

示例：将文件添加到 FormData 并上传

const formData = new FormData();
formData.append('avatar', file); // 'avatar' 是后端接收字段名
formData.append('username', 'john'); // 可同时上传其他字段

通过 XMLHttpRequest 发送文件

使用 XMLHttpRequest（XHR）发送 FormData 数据是最常见的做法。

示例：上传文件到服务器

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
// 监听上传进度（可选）
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
console.log('上传进度:', Math.round(percent) + '%');
}
};
// 上传完成
xhr.onload = function() {
if (xhr.status === 200) {
console.log('上传成功:', xhr.responseText);
} else {
console.error('上传失败:', xhr.statusText);
}
};
// 发送请求
xhr.send(formData);